うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

先ほど、XHTMLに準拠したファイルをサーバで表示させたら、cssによるデザインが全く反映されないと言う事態になりました。
些細な原因でしたが、忘れないように書き留めておきます。

Firefoxでは問題なくcssによるデザインが反映されています。
ところがインターネットエクスプローラー7(以下IE7)では全くcssが反映されません。素の構文がそのまま表示されてしまいました。

cssファイルを見ても、バグは見つかりません。
原因不明なので、cssのほとんどを消して、1行だけ残してIE7に読み込ませましたが、やはり反映しません。

ここで、一行の中の1文字単位を見直しました。
その結果、半角スペースが入っていないために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が読み込めなくなったことに、正直に驚きました。
また、気がつかない内に起こりそうなエラーなので、ここに書き留めておけば後々役立つと思います。

5月 13th, 2009

Posted In: HTML/XHTML/cssの構文の書き方, Internet Explorer

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です