IE9でルビ付きの縦書き文章を表示する

IE9でルビ付きの縦書き文章を表示する

ルビ付きの縦書きの文章がIE6では正常に縦書きでレンダリングされるのに対して、IE9では2文字以上の文字にルビをふるとその箇所が横書きで表示されます。
またルビ付きとルビなしの文字で縦の中心線からの位置がずれて表示されます。

http://www.geocities.jp/laut6/tategaki/zekkuX11.html

DOCTYPE宣言をHTML4.01にすればIE9でも昔通りのレンダリングになりますが、HTML4.01でRUBYタグを使うのは文法違反なのであまりやりたく有りません。
http://www.geocities.jp/laut6/tategaki/zekku4.html

IE9向けに縦書きのルビあり文章はどのようにマークアップすれば良いのでしょうか。
(リンク先URLのページをFirefox、Opera、Safariで閲覧すると文章が重なって表示されます。)

 

質問情報


最終更新日 2018年5月16日 表示 1,275 適用先:
回答
回答

IE9 モードでは HTML5 対応のため (ruby が HTML5 で標準化される予定のため) 、実装が変わっています。

ご提示のページのソースを見ると IE 独自実装の ruby 仕様で記述されていますが、HTML5 の ruby 要素の仕様で記述するとどうでしょう。

(参考)
http://dev.w3.org/html5/spec/Overview.html#the-ruby-element
http://www.w3schools.com/html5/tag_ruby.asp
http://www.w3.org/html/ig/jp/wiki/Ruby

なおソースを変更したくないのであれば、互換表示モードにすれば問題ないでしょう。(meta タグまたは HTTP ヘッダーで X-UA-Compatible ディレクティブを使って互換モードを表示してください。

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

 

この回答で問題は解決しましたか?

役に立ちませんでした。

回答としてマークしていただきありがとうございます。

この返信の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。今後のサイト改善に役立てて参ります。

この回答の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。