脱 三日坊主 宣言！

ショック

昨日、良い意味での副作用がありましたと書きましたが、Win版IE6 が標準モードで表示されるようになったおかげで、デザインが微妙に崩れてしまってます。例えば、文字サイズが小さくなってたり、コンテンツリストの幅が１文字分大きくなってたり…。

原因は 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)よりも１段階小さなフォントで表示されてしまうのです。

これを回避する方法は、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 を踏み台にしているところに少し抵抗を感じます。もうちょっとエレガントな方法は無いのかなぁ？