IEだけ縦書きにすると位置がおかしくなります。

Question

IEだけ縦書きにすると位置がおかしくなります。

https://jsfiddle.net/r4j6j5yt/1/

バグがあるのでしょうか？
どのようにすれば同じように表記できるでしょうか？

https://jsfiddle.net/r4j6j5yt/1/をIEとほかのブラウザで見てもらえばわかりますが、真ん中上にIE11以下だけ来ません。

ほかのブラウザは真ん中上に来ています。

Answer 1

以下のようにするとIE11でも上手く表示できました。
理由は分かりません。
writing-modeはW3Cで仕様が正式に勧告されていないこともあり、ブラウザやバージョンによっては動作が異なることがあるようです。

<h3 class="c-hedding-section-title"><span class=" u-vertical">お勧め商品</span></h3>

Comments

[退会済みユーザー]

ありがとうごさいます。理由は確かに不明ですね。IEでうまくいかないときはspanで囲むとよいのでしょうか？もしよろしければなぜこの発想が出てきたのか理由を教えていただければ幸いです。私にはまったく思いつきませんでした。

[gin]

簡単に解説すると、質問でうまくいっていなかったのは縦になったh3の左右margin:auto;が効いていなかったからと思います。
今回の回答はh3自体は縦ではなく横のままなのでtext-align:center;で真ん中に来たということですね。

[退会済みユーザー]

ありがとうごさいます。

＞＞
簡単に解説すると、質問でうまくいっていなかったのは縦になったh3の左右margin:auto;が効いていなかったからと思います。

IEのみmarginが効いていなかったので、IEのみ真ん中に来なかったということでしょうか？そして上下に隙間が空いたのはIEのみ上下にmarginがあたるバグがあったということですかね？

[attercop]

IE11で似たような事象に遭遇した際に、いろいろ試していて発見しました。
（IE6では上手く表示できていたのに、IE11ではwriting-modeを指定したtdの幅がおかしくなった。）

[退会済みユーザー]

＞＞＞
今回の回答はh3自体は縦ではなく横のままなのでtext-align:center;で真ん中に来たということですね。

？？？縦書きにはなっていますが、縦書きになっていないとはどういうことでしょうか？

[退会済みユーザー]

＞＞＞
今回の回答はh3自体は縦ではなく横のままなのでtext-align:center;で真ん中に来たということですね。

技術的な理由でspanを使われたというよりは、たくさん試してなんとなくこれでうまくいってしまったということでしょうか？
それであればそれで大丈夫です。

技術的な理由がもしあったら教えていただければ幸いです。

[gin]

あ！
すみません、勘違いですｗ
width見逃してました！＜横100％と勝手に思ってた
大丈夫そうですね。

[gin]

えーと、縦になったh3にはmargin:auto;が効いていなかった。
縦の部分を分離したらうまくいったということですが…
縦にしたときはmarginが時計回りに90度かわる(margin-bottomが左に来る)からIE11の解釈の方がただしいような。＜左右margin:auto;は縦になったら上下？
縦書きは使う機会がないので気にしてなかったですが、なんかもやもやしますなｗ

-------訂正
ちょっと調べたら90度時計回りも勘違いっぽいですｗ
あれ？いつからそう思ってたんだ？？？

[attercop]

IE11の挙動はginさんの仰る通り、中央揃した後に90度回転させてるのだと思いますが、IEの挙動がおかしいと思います。
インライン要素にはvertical-alignが定義できないので、text-aliginとvertical-alignも回転入して入れ替えるようなことをされては困りますしね。

[退会済みユーザー]

うーん確かに縦書きはほとんど行わないので謎ですね。とりあえず縦書きの時のマージンのきく方向性がIEだけ違うということですね。

[退会済みユーザー]

インラインブロック＝ブロック要素のことでしょうか？

IEだけ中央揃した後に90度回転させてるのでマージン左右が上下に変更されて、上下に隙間が空いたということですね。
他はそうでないので左右に開いたのですね。

どっちがおかしいのかわかりませんが、ちゃんと仕様通り作ってほしいですね。

[attercop]

すいません、インライン要素と書きたかったです。
コメントを修正させて頂きました。

> どっちがおかしいのかわかりませんが、ちゃんと仕様通り作ってほしいですね。
仕様がまだ確定してなく実験段階機能なので、仕方ない部分もあるのではないかと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

[退会済みユーザー]

そもそも使用自体が決まっていないのですね。

＞＞
インライン要素にはvertical-alignが定義できないので、

インライン要素とtableのみ使えるのではなかったでしょうか？

[attercop]

> インライン要素とtableのみ使えるのではなかったでしょうか？
すいません勘違でした、インライ要素は高さを設定出来ないので、vertical-alignが効かないと思い込んでいました。