IE9~11でのpositionと画像の不具合
今更ながらIE9~11のバグらしきものを発見した。
ある特定の条件を満たすと画像のwidthが正常に計算されないらしい。
以下の状況下で発生するようだ。
- 第1要素でpositionを相対位置に、widthに幅を指定
- 第1要素内部の第2要素に絶対位置のpositionを指定
- 第2要素内部の第3要素にmax-widthを100%にした画像を配置
ざっくりとHTMLとCSSを書くとこう。
HTML
<div class="first"> <figure class="second"><img src="画像.jpg" alt="画像" /></figure> </div>
CSS
img{ max-width:100%; } .first{ position:relative; z-index:1; width:200px; } .second{ position:absolute; /*width:100%;*/ z-index:10; top:0; left:0; }
上記の書き方では、通常であれば、第1要素でimgがかちっと引っかかるのでwidthは200pxとなるが、IE9~11では画像の等倍サイズとなってしまう。
他の最新のモダンブラウザや、IE6~8のレガシーブラウザでは発生していない問題なのでなんとも解せないが、コメントアウトしている部分のように第2要素のwidthを100%にすることで中のimgにwidthが設定される。