IEでposition:absolute;が崩れる場合

コーディングでposition関連のプロパティを使う機会はとても多いと思います。

今回ではIEでchromeなどのブラウザとちがっいぇレイアウトが崩れる現象に遭遇したのでメモです。

二倍で書き出した画像に対して、画像に対してzoomを指定し半分のサイズで表示させていましたが、
ブラウザ上では画像は半分サイズで表示されているにもかかわらず、親要素に対して、
指定している位置がおかしいという現象がありました。

contents .inner{
  position:relative;
}
.contents{
 position:absolute; 
 bottom:0;
 left:0;
}
.contents　img{
 zoom:0.5;
}

上記のように指定してしまうと、画面上は正常な画像サイズに見えていても、実際は2倍サイズとして扱われてしまっているため
positionの位置が崩れていたということです。

表示とコードの差異がわかりずらく、解決に時間がかかってしまったので、zoomなど、問題のありそうなプロパティなどに注意して、
コーディングを行っていきたいですね。