DD_belatedPNG.jsでIE6が暴走する

Standard

というか、暴走しました。
http://bugcloud.com/worcloud/dev/1/
これをIE6で見れば、シングルコアとかのマシンならCPU 100%になってたぶんフリーズします。
たぶんココってところだけ書きますと、
 
HTML

<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('ul li a');
</script>
......
<ul>
  <li><a href="javascript:void(0)">暑いです。</a></li>
  <li><a href="javascript:void(0)">暑いです。</a></li>
</ul>

 
CSS

ul li,
ul li a {
  display: block;
  float: right;
}
ul li a {
  background: url(../img/li.png) repeat left top;
}
ul li a:hover {
  background-position: right bottom;
}

 
 
ul li aが1行だと暴走しない、

ul li,
ul li a {
  display: block;
  float: left;
}

だと暴走しない、さらに

ul li,
ul li a {
  display: block;
  float: right;
  height: 100px;
  width: 100px;
}

みたいに幅と高さを指定すると暴走しない、さらにさらに

ul {
  float: right;
}

ul li,
ul li a {
  display: block;
}

みたいに親要素にfloat:right;を指定してる時は暴走しないという検証する人泣かせな現象です。
 
DD_belatedPNG.jsの113行目、

attachHandlers: function (el) {
  var self, handlers, handler, moreForAs, a, h;
  self = this;
  handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'};
  if (el.nodeName == 'A') {
    moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'};
    for (a in moreForAs) {
      if (moreForAs.hasOwnProperty(a)) {
        handlers[a] = moreForAs[a];
      }
    }
  }
  for (h in handlers) {
    if (handlers.hasOwnProperty(h)) {
      handler = function () {
        self[handlers[h]](el);
      };
      el.attachEvent('on' + h, handler);
    }
  }
  el.attachEvent('onpropertychange', this.readPropertyChange);
}

でハンドルしてるvmlOffsetsっていうメソッドが無限に実行されるっぽいです。
 
回避策として、
MSすら撲滅しようとしているIE6を未だに使ってる人は、画像の後ろが多少グレーだろうがたぶん気にしないので、透過にしようとなんてしない
というのをオススメします。

Facebook comments:

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>