先ほど、XHTMLに準拠したファイルをサーバで表示させたら、cssによるデザインが全く反映されないと言う事態になりました。
些細な原因でしたが、忘れないように書き留めておきます。
Firefoxでは問題なくcssによるデザインが反映されています。
ところがインターネットエクスプローラー７（以下IE7）では全くcssが反映されません。素の構文がそのまま表示されてしまいました。
cssファイルを見ても、バグは見つかりません。
原因不明なので、cssのほとんどを消して、１行だけ残してIE7に読み込ませましたが、やはり反映しません。
ここで、一行の中の１文字単位を見直しました。
その結果、半角スペースが入っていないためにIE7ではcssが反映されなかったことが判明しました。IE6では正常に動作していたので、意外な盲点でした。
この様な構文がエラーとなり読み込まれませんでした。
/*メニュー*/
menu {
font-weight: 700;
font-size: 14px;
line-height: 20px;
font-style: normal;
color: #ffffff;
text-align: center;
background: #0099cc;
}
この構文がエラーとならずに読み込まれました。
/* メニュー */
menu {
font-weight: 700;
font-size: 14px;
line-height: 20px;
font-style: normal;
color: #ffffff;
text-align: center;
background: #0099cc;
}
違いは「/*」の前後に半角スペースを入れていないことだけです。IE7では半角スペースが入らないとエラーとなるようです。
たったこれだけでcssが読み込めなくなったことに、正直に驚きました。
また、気がつかない内に起こりそうなエラーなので、ここに書き留めておけば後々役立つと思います。
mizunuma 5月 13th, 2009
Posted In: HTML/XHTML/cssの構文の書き方, Internet Explorer