0

繰り返しますが、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を使用してテストしています。

4

2 に答える 2

0

Internet Explorer の条件付きコメント スタイル シート...

http://www.jabcreations.com/web/css/ieccss

JavaScript を有効にしなくても動作します。

ハックの必要はありません。IE が使用する値ではなく間違った値 (高さ/幅など) を必要とする場合、それらの疑似正しい値を適用する必要がある IE のバージョンのみが機能します。

これにより、IE に関連する不快な要素をすべてメインのスタイル シートから除外し、IE のバージョンごとに特定の IECCSS を使用できます。

于 2013-07-27T08:34:30.807 に答える