今更ながら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が設定される。