CSSを誤用すると互換表示に変換される（IE8.0）

Home>Information>CSSを誤用すると互換表示に変換される（IE8.0）

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

以前から、このサイトをIE8.0で表示すると、「～の表示中に問題が生じたため、InternetExplorerは互換表示をしようしてWebページを更新しました。」と表示され、互換表示モードが自動的にオンになっていました。

メニューのリンクにマウスカーソルを移動させると、互換表示に変換されるということがわかり、CSSに問題があることがわかりました。

a:hoverの背景にアニメーションGIFを指定すると起こる

メニューは、a:hoverを指定して、リンクテキストにマウスカーソルが移動すると、アニメーションGIFにより、リンクテキストが強調表示されるようにしていました。

a:hover{
display:block;
color:#ffffff;
background-image:url(アニメーションGIFへのパス);
}

このアニメーションGIFへの指定をやめたところ互換表示に変換されなくなりました。
background-colorや、アニメーションではない画像をbackground-imageに指定した場合には、問題は起こりません。

display:blockを指定した部分は、ブロック表示されます。このときに、幅と高さを指定してやらないと、アニメーションGIFを背景画像に指定したときに、エラーとなり、互換表示で表示されるようになります。
これを回避するには、以下のように、widthとheightを100%にしてやります。

a:hover{
display:block;
color:#ffffff;
background-image:url(アニメーションGIFへのパス);
width:100%;
height:100%;
}

関連リンク

よく読まれている記事

UpDate:2010-1-14