IE7 わけがわからない - ぬかるむ日々

IE7特有で発生するワケわからん症状をみつけた。現時点で再現はできるけど原因と対策は不明。見当もつかない。

追記：今のところXP+IE7ではそれほど・・・という感じのような気がする。Vista+IE7だったり、もっと特有の環境で発生するのかも。

とりあえず、以下のようなよくあるリスト型メニューのHTMLを作ってIE7で開いてみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
ul.menu { list-style-type:none; }
ul.menu li a:hover { display:block;background-color:#ccc; }
</style>
</head>
<body>
<div style="width:200px">
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>

<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
<ul class="menu">
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
  <li><a href="#">メニュー１</a></li>
</ul>
</div>
</body>
</html>

当然、各リンクをにマウスを乗せると a:hover が適用されて要素の背景色が変わる。そしてIE7でももちろん変わる。

問題はその速度。なんかやたらと重い。もっさりしてる。

IE以外のモダンブラウザでは何ら問題なくサクサク背景色が変わるけど、IE7だとマウスの動きに遅れてついてくる感じになってしまう。
負荷を確認したところ、Pentium4 2.8GHzの環境で40%〜70%程度CPU負荷がかかっている。要は単純にCPU負荷の問題っぽいので最近のディアルコアの早いのならそんなに分からないかもしれない。

色々調べてたら、

ラップしているDIV要素のスタイルwidthを消したり、hoverさせる要素を少なくすると一気にCPU負荷は下がる
widthはラップしている要素に適用しようが、中に適用しようが結果は同じ。
widthじゃなくてheightでも同様の症状が出る。(marginやpaddingなどでは発生しない)

という事が分かった結果、ますますワケがわからない。

結局時間がなくて原因、回避方法の究明までいたらず気持ち悪いまま今日の調査は終了。

同じ症状を経験して回避策の分かる方いたら教えてください。