背景のサイズをIEに追加しようとしましたが、まったく機能しません。
HTML
<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>
CSS:
div#content h2#news {
background: url('../images/news-background.jpg') no-repeat;
background-size: 100%;
border-radius: 20px;
color: #fff;
margin: 20px 0 0 20px;
padding: 8px 20px;
width: 90%;
-moz-background-size: 100%;
-moz-border-radius: 20px;
-webkit-background-size: 100%;
-webkit-border-radius: 20px;
}
filter の何が問題になっていますか?
'Dan'によって同様のスレッドで投稿されているように、Spriteを使っていないのなら修正することが可能です。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
ただし、これは割り当てられた領域に収まるように画像全体を拡大縮小します。あなたがスプライトを使用しているのであれば、これは問題を引き起こす可能性があります。
注意
フィルタに欠陥があり、割り当てられた領域内のリンクはクリックできなくなりました。
jquery.backgroundSize.js を作成しました。1.5Kのjqueryプラグインで、「cover」および「contains」の値に対するIE 8フォールバックとして使用できます。 demo を見てください。
あなたの問題を解決することは同じくらい簡単かもしれません:
$("h2#news").css({backgroundSize: "cover"});
また、私は別の便利なリンクを見つけました。これは、このような背景のハックです。
.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }
私はie8のために、上記のフィルターソリューションを使用します。ただし、フリーズリンクの問題を解決するには、次の手順を実行します。
background: no-repeat center center fixed\0/; /* IE8 HACK */
これは私にとってフリーズリンクの問題を解決しました。
@RSKが指摘するように、IE8は背景サイズをサポートしていません。これに対処する方法を理解するために、ここに示すようにIE固有のハックをいくつか使用しました。
//IE8.0 Hack!
@media \0screen {
.brand {
background-image: url("./images/logo1.png");
margin-top: 8px;
}
.navbar .brand {
margin-left: -2px;
padding-bottom: 2px;
}
}
//IE7.0 Hack!
*+html .brand {
background-image: url("./images/logo1.png");
margin-top: 8px;
}
*+html .navbar .brand {
margin-left: -2px;
padding-bottom: 2px;
}
これを使用して、私は自分のロゴ画像を見栄えの悪い写真に変更することができました。しかし、最終結果は大丈夫です。このようなことを試してみることをお勧めします。