nothing is drawnの解釈がブラウザによって違う。例によってIEとその他で

IE

http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/3d78a57b-9c19-442e-b709-c46826580cd7
で、議論中なのですが、一段落したのでこっちにも書いときます。

発現条件

IEだと、背景色も背景画像も設定していしていない要素は描画されないので、DOMのイベントを設定しても、クリックやマウスオーバなどのイベントが起こりません。背景色や背景画像を設定しても、要素のCSSのvisibility属性にhiddenを設定した場合は同様の現象が起こります。

サンプルコード

以下、サンプルコードです。画像をクリックすると、前面にきている要素名が返されます。
Firefox3.5, Opera9.64, Google Chrome2.0.172.30, Safari4では、左右どちらをクリックしてもDIVが返されるのに対して
Internet Explorer 8では、左がIMG右がDIVを返します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
      $(function()
      {
        $('div, img').click(function(){ alert(this.tagName) });
      })
    // ]]>
    </script>
    <title>zindex</title>
  </head>
  <body>
    <img src="http://ec.atdmt.com/b/NMMRTUMA1MR1/180x150_IntroducingIE8_1215.jpg" />
    <div style="position:absolute;width:180px;height:150px;left:8px;top:8px;z-index:1000;"></div>
    <img src="http://ec.atdmt.com/b/NMMRTUMA1MR1/180x150_IntroducingIE8_1215.jpg" />
    <div style="position:absolute;width:180px;height:150px;left:194px;top:8px;z-index:1000;background-color:#000"></div>
  </body>
</html>

対処方

background-imageに透過GIF画像を指定しましょう。
visibility:hiddenの代わりに、背景画像を透過GIF画像と置換しましょう。


透過PNGだと、IE6が対応していないのでGIFの方がいいです。そもそもIE用だし。
透過GIFは、1px * 1pxで十分です。ブラウザがうまいこと敷き詰めてくれるので