DL DT DD を使ったコーディングで、CSSでDDをDTの横に表示するようにマイナスのmarginを使っています。
それで、DDのほうに、リンクを張ったのですが、IEだとなぜかマウスでそのリンクが反応しない。
キーボードでの操作だとリンクにいけるんですが……。
しばらく悪戦苦闘した結果、マイナスmarginで重なっているのが原因のようでした。
なので、DTにwidhtを指定して、重ならないようにしたのですが……それでも症状は治らず。
なので、このCSSのテクニックを使っている方のCSSをじっくり見ると、DDにzoom:1;という値が。
同じように入れると、あら、直った。
確かに、IEのCSSのバグのときに、zoom:1;やheight:1%;を指定すると直るという話は聞いたことがありました。
そこで、何故なのかということを検索してみると、いつも見ているCSS HappyLifeさんの記事の、
IEの様々なバグの真相らしきものというのを見つけました。
hasLayoutがIEの様々なバグの元凶(大袈裟?)だったみたいです。そして、zoomやheightなどがこのhasLayoutの値をtrueにするということらしいです。
hasLayoutは、ソコにレイアウトが有るのか無いのかってのを判断しているようで、デフォルトの値がfalseでレイアウト無しになっているので「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。
hasLayoutについては、
IEでのCSSのバグを回避するhasLayout(コリス)にまとまって載っています。
zoomで指定するのが楽なのかもしれないですけど、独自拡張を使うというのはなるべく避けたいですね。
height指定が可能であれば、そっちを利用していこう。
(とか言っておきながら、FireFoxのスクロールバーの有無でのズレを防止する為に、overflow-y:scroll;を入れているのだけどね…)