position:absoluteにハマったのでメモ

本職はウェブ制作なのでCSSは年中いじるんですけど、position属性はあんまり使う機会がないのでバグ取りに困りました。

なんで指定ミスじゃなくてバグなのかというと、IE限定だから^^;
ちなみに他のサイトでチラホラみられる感じの、IEでjQueryが動かないとか、親要素のpositionとfloatに引っ張られてる奴じゃないです。

[css]
div{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}
[/css]

まあ普通の指定。
で、

[html]
<!–空要素–>
<div></div>
[/html]

空要素に上のCSSを適用すると、空要素が消えます。
jQueryでmouseenterイベントなどをon ((jQuery1.9系使ってるのでliveではなくてonで)) してやっても、IEでは動きません。
いや動くには動くんですけど、なんかすごくタイトっていうか1px四方?くらいのドット単位でしか反応しないって言う感じで。
ためしに空要素じゃなくて適当な文字を入れてみると、文字の上は反応します。

大雑把にいうとIEではinnerTextがないと要素に指定したイベントが発火しないみたいなので、
中に誰もいませんよって言われないようにあるような指定をしてやればいいって事みたいです。

[css]
div{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
background-image:url(適当な画像);
}
[/css]

背景画像を指定してやると空にならないみたいです。
ただそもそもなにも表示する必要性がないから空要素を指定してるのであって、
このためだけに透明画像とか作るのも癪って言えばそんな感じで。

CSSの画像指定は画像がない場合にはそのままスルーするみたいなので、
ここは存在しない画像を指定すればOK見たいです。

あと、background-colorでも可能みたいですが、
transparentを指定して動くのかどうかが良くわからないので、割愛で。
暇だったらやってみます。