2008-02-08 (金)
■ position:relative; と overflow:hidden; 絡みの IE のバグ？
また IE のバグっぽい現象に遭遇した。 うまく説明できないが、position: relative; を使う時、 overflow: hidden; を同時に設定しないと動作が変になることがある。 しかも、IE6 では問題ないのに IE7 でだけおかしくなる。 具体的には、こんな現象に悩まされた。
<div id="ajaxtree"> <ul> <li>...</li> <li>...</li> ...... </ul> </div>
のようなツリーメニュー用の HTML があって、この外側に角丸コーナーをつけるために、 この部分をさらに <div class="corner">...</div> のように囲んだ。 この時、
.corner {
position: relative;
}
のようにスタイルシートに設定したところ、 <ul> や <li> タグの部分をクリックしても onclick のイベントが発生しなくなってしまった。 さらに、マウスカーソルの形を変えるスタイルシートの設定も効かなくなり、 感じとしては <ul> や <li> のブロックが何か別の要素の下に隠れてしまったかのようだ。
最初、hasLayout 絡みの現象かな？ と思ったので、zoom: 1; と設定してみたが全く効果無し。 試行錯誤の末、#ajaxtree か .corner のところに overflow: hidden; を追加してやると正常に動作するようになった。 なぜだ？ 理由がさっぱり分からない。
これ以上調べることは面倒なのでしないけれど、これ、おそらく IE のバグだよなぁ…。 他のブラウザでは問題なく動くわけだし。
このエントリの続き: 2008-07-28 (月)
[コメントを書く]
本日のリンク元
- 9 http://www.revulo.com/bbs/wforum.cgi?no=239&reno=2...
- 6 http://blogger.blog360.jp/552429/60732568
- 5 http://www.revulo.com/PukiWiki/Plugin/AjaxTree.htm...
- 5 google検索(ie7 position relative overflow)
- 4 http://www.revulo.com/
- 4 google検索(ie overflow hidden)
- 4 google検索(css hidden)
- 3 google検索(relative overflow hidden)
- 3 google検索(t)
- 3 google検索(css position ie)
- 3 http://cache.yahoofs.jp/search/cache?p=df Javascri...
- 3 http://209.85.175.132/search?q=cache:e6R-64HJbXIJ:...
- 2 http://www.revulo.com/bbs/wforum.cgi?mode=allread&...
- 2 http://www.revulo.com/bbs/wforum.cgi?mode=allread&...
- 2 google検索(overflow スムーズスクロール)
- 2 google検索(overflow relative)
- 2 google検索(overflow css)
- 2 google検索(IE6 CSS overflow hidden)
- 2 google検索(overflow:hidden; IE 5)
- 2 google検索(position relative IE バグ)
- 2 google検索(li overflow hidden)
- 2 google検索(position relative ie)
- 2 google検索(position:relative; IE7 overflow hidden bug)
- 2 google検索(overflow hidden position relative)
- 2 google検索(overflow hidden ie)
- 2 google検索(overflow hidden)
- 2 google検索(overflow hidden)
- 2 google検索(overflow:hidden)
- 2 google検索(overflow:hidden; ie6)
- 2 google検索(ie7 overflow hidden)
- 2 google検索(ie position relative)
- 2 google検索(ie position: relative;)
- 2 google検索(ie overflow hidden)
- 2 google検索(hidden ie)
- 2 google検索(css position relative)
- 2 google検索(css hidden)
- 2 google検索(IE6 position relative バグ)
- 2 google検索(ie6 overflow hidden)
- 2 google検索(overflow hidden ie)
- 2 google検索(overflow: hidden; IE)
- 2 google検索(li overflow:hidden)
- 2 google検索(ie overflow hidden バグ)
- 2 google検索(ie overflow hidden)
- 2 google検索(css rerative ie overflow)
- 2 google検索(css overflow hidden)
- 2 google検索(ｃｓｓ class id を同時に設定)
- 2 google検索(IE overflow hidden)
- 2 google検索(overflow:hidden)
- 2 google検索(ie7 relative)
- 2 google検索(html:hiddennがないと)
- 2 google検索(css position relative)
- 2 google検索(css li a overflow:hidden)
- 2 google検索(overflow:hidden 設定)
- 2 google検索(f)
- 2 http://www.google.co.jp/hws/search?q=IE7 overflow:...
- 2 http://www.google.co.jp/hws/search?hl=ja&q=css hid...
- 2 http://press.eek.jp/result/ie7/ie7 ブロック
- 1 http://www.revulo.com/bbs/wforum.cgi?mode=newsort&...
- 1 http://www.revulo.com/bbs/wforum.cgi?mode=newsort
- 1 http://www.revulo.com/PukiWiki/Plugin/TreeView.htm...
- 1 http://www.google.es/search?q=IE6 バグ position r...
- 1 google検索(CSS IE7 overflow:hidden)
- 1 google検索(t)
- 1 google検索(z-index bug ie)
- 1 google検索(relative ie バグ)
- 1 google検索(relative css)
- 1 google検索(position:relative)
- 1 google検索(position relative javascript)
- 1 google検索(position:relative IE バグ)
- 1 google検索(overflow:hidden; IE)
- 1 google検索(overflow relative ie)
- 1 google検索(overflow ie)
- 1 google検索(overflow hidden ie6 )
- 1 google検索(ie6 relative)
- 1 google検索(ie6 position relative)
- 1 google検索(ie overfllow hidden)
- 1 google検索(ie css position zoom)
- 1 google検索(div overflow ie6)
- 1 google検索(css position relative)
- 1 google検索(css overflow IE)
- 1 google検索(css li overflow バグ)
- 1 google検索(ImageMagick IE)
- 1 google検索(IE8 position:relative)
- 1 google検索(IE6 position:relative)
- 1 google検索(IE z-index バグ position)
- 1 google検索(IE position relative 動く)
- 1 google検索(IE 7 position relative)
- 1 google検索(IE position 動く)
- 1 google検索(position relative IE6)
- 1 google検索(position:relative 無効)
- 1 google検索(position: relative; バグ)
- 1 google検索(internet exproler 7 relative overflow)
- 1 google検索(IE6 position relative)
- 1 google検索(IE position relative)
- 1 google検索(CSS IE position:relative バグ)
- 1 google検索(relative javascript ie)
- 1 google検索(position IE6 relative)
- 1 google検索(hidden css)
- 1 google検索(IE overflow hidden)
- 1 google検索(IE overflow hidden)
