横幅を決めたdivタグにTableタグを流し込み、CSSの「overflow:auto」で動かせる表のようなHTMLを作っていたら、IE9だけなぜか異常な動きをする。具体的にはTableの中のリンクにマウスカーソルを合わせると、下部の要素がどんどん下に移動してしまう。文字で書いても恐らくよくわからないと思うので、下のサンプルページにIE9でアクセスして確かめてほしい。
Tableタグの中の「Link」や「Link2」にマウスカーソルを何度も合わせると、下の「テスト」という文字がどんどん下に流れていってしまうはず。不思議なのはこの現象が起こるのはIE9だけで、むしろバグがもっと多いはずのIE8やIE7では起こらない。また、当然IE以外のChromeやFirefoxでは問題ない。
最初このバグに遭遇したとき、当然既知の問題だと思ったので早速Webで検索たのだが、思った通りの記事が中々見つからなかった。非常に似た話では以下のような記事があったのだが、このバグが再現しないIE6やIE7の話だし、条件も微妙に異なっている。
対処法もいちおう試してみたのだが、結果は効果なし。バグとしては似ているが、どうやら別物らしいという判断に至った。
どうやら「overflow:auto」が問題らしい
その後も検索語を変えて色々探してみたところ、見つけたのがマイクロソフト公式のコミュニティサイトのやりとり。内容的にはドンピシャだった。
スタイルシートでhover属性を指定しているオブジェクトの上にマウスを合わせると親オブジェクトの高さが伸びていく。
●発生条件：
１：テーブルタグにhoverを使っている。
2：1を囲むテーブルタグがoverflow属性がついている。
上記条件の時にhover属性をつけたオブジェクトの上にマウスを置くと親オブジェクトの高さが増加していく。
実はやりとり自体には（「バグだと思うので問い合わせては？」が主な話なので）あまり意味はないのだが、投稿者の方が対処法を書いていてくれたのがありがたかった。内容的には簡単で、「overflow:auto」を「overflow:scroll」に変えればいいだけらしい。早速試したところ、この問題が起きないことが確認された。
ただCSSの「overflow:auto」を「scroll」を書き換えるだけでは若干問題がある。本来必要ないはずの方向のスクロールバー（今回の場合は縦）が表示されてしまう。こちらを解決するには「overflow-x（y）」を使えばいい。
ただこの「overflow-x」はIEの独自拡張CSSのようなので、いわゆる「正当なCSS」ではなくなってしまうようだ。ただメジャーブラウザならどれでも機能するようなので、あまり気にする必要はないと思われる。
この記事へのコメント
コメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。