ショック
昨日、良い意味での副作用がありました
と書きましたが、Win版IE6 が標準モードで表示されるようになったおかげで、デザインが微妙に崩れてしまってます。例えば、文字サイズが小さくなってたり、コンテンツリストの幅が1文字分大きくなってたり……。
原因は elements.css
と layout.css
で使っている UA の振り分け方法です。
文字サイズの指定を例に採りますと、Win版IE5.5 以下と IE6 の後方互換モードでは、標準状態のフォントサイズ(16px)が font-size: small;
と一致しているのですが、Web 標準仕様に準拠した UA と IE6 の標準モードでは、font-size: medium;
と一致します。そこで振り分けは、以下のような記述で行っています。
body { /* Win版IE4.x 〜 5.x と IE6.0(互換モード) Mac版IE4.x 用の設定 */
font-size: small; /* WinIE4.x 〜 5.x 用の文字サイズ */
font-style : normal;
font-weight: normal;
text-decoration: none;
}
html>body { /* Win版IE4.x 〜 6.0, Mac版IE4.x を除外 */
font-size: medium; /* Web 標準仕様 UA の文字サイズ */
}
こうすることで、子セレクタ(html>body
)を理解できない Win版IE には font-size: small;
が適用され、子セレクタを理解できる UA には、font-size: medium;
が適用されます。
ところが、Win版IE6 は、標準モードになっても子セレクタを理解できませんから、font-size: medium;
が適用されず、標準のフォントサイズ(16px)よりも1段階小さなフォントで表示されてしまうのです。
これを回避する方法は、Win版IE5.5 以下のみを除外する記述に書き換えるしかありません。今思い付くのは以下のような記述です。
body {
font-size: small; /* WinIE4.x 〜 5.x 用の文字サイズ */
font-style : normal;
font-weight: normal;
text-decoration: none;
voice-family: "\"}\""; /* Win版IE4.x 〜 5.x はこの行の } 以降を無視 */
voice-family: inherit; /* voice-family の値を継承値にもどす */
font-size: medium; /* Web 標準仕様 UA の文字サイズ */
}
「Win版IE5.5 以下では、\
によるエスケープを正しく解釈できない」というバグを利用しているのですが、voice-family
を踏み台にしているところに少し抵抗を感じます。もうちょっとエレガントな方法は無いのかなぁ?