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が設定される。

 

 

カテゴリ

この記事のコメント

コメントはないです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です