繰り返しますが、Internet Explorer は時間とお金を浪費しています。
レスポンシブ サイトを作成しており、画像が含まれる要素の幅が 100% を超えないようにする必要がありますが、ページからはみ出す場合に備えて、高さも特定のパーセンテージを超えないようにする必要があります。
いくつかの CSS:
#content{
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured{
position:relative;
width:100%;
}
#featured-images{
text-align:center;
}
#featured-images img{
max-height:80%;
height:auto !important; /* IE fix */
height:80%; /* IE fix */
max-width:100%;
width:auto !important; /* IE fix */
width:100%; /* IE fix *
}
いくつかのマークアップ:
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="lib/imgs/fi-1.jpg"/>
</div>
</div>
</div>
現在、このページは Chrome で動作します。IE6 や IE8+ でも動作します。Firefox や Opera ではテストしていません。しかし、IE 7 は間違いなくボールをプレーしません。ブラウザのサイズが切り株に変更されたかのように、画像がごくわずかに縮小されているように見えます。
理想的ではないことはわかっていますが、IE NetRendererを使用してテストしています。