0

IE8 以下の background-size CSS3 プロパティに関連する表示の問題を修正しようとしています。Retina ディスプレイ用にロゴを最適化するために、次のコードを実装しました。

.logo {
background: url('../img/logo_sm.png') no-repeat scroll transparent;
text-indent: -999em;
transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
margin: 0;
width: 141px;
height: 32px;
background-size: 141px 32px;
display: inline-block;

次に、これらの行を追加して、IE8 がロゴのサイズを適切に変更できるようにしました (背景サイズを考慮しないため)。

/* Make IE8 cooperate */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../img/logo_sm.png', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../img/logo_sm.png', sizingMethod='scale')";

この問題は現在、すべてのバージョンの IE で発生しており、元の背景画像が、これらのフィルタによって適切にサイズ変更された新しい画像の背後に表示されます。

IE8以下で元の背景プロパティを無視して1つの画像のみをレンダリングするように設定するにはどうすればよいですか? 可能であれば、別の IE 専用スタイルシートを必要とせずにこれを行いたいと考えています。

4

1 に答える 1

1

これが私のアプローチです。職場では、IE7 未満はサポートされなくなりました。1) IE7 をオーバーライドする 2) IE8 & IE9 をオーバーライドする 3) IE9 用に追加し直す

*selector {background:none;} /* IE7 */
selector {background:none\9;} /* IE9, IE8 */
:root selector {background: url('../img/logo_sm.png') no-repeat scroll transparent\9;} /* IE9 */
于 2013-03-26T03:31:08.133 に答える