1

要素に次の css を使用しています。Internet Explorer 8 でのみ壊れます。

background-image: url(../images/icon-save.png);
background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #0c93C0, #FFF);
/*IE7-*/ background-image: url(../images/icon-save.png), filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0);
/*IE8+*/ background-image: url(../images/icon-save.png), -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#383838', endColorStr='#666666', GradientType=0)"; 
background-image: url(../images/icon-save.png), -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #383838),
color-stop(1, #666666)
);

-ms-filter または -ms-linear-gradient のいずれかが機能することを期待しますが、そうではありません。stackoverflow のトピックを調べましたが、画像を含むものは見つかりませんでした。

4

4 に答える 4

2

基本的にIE8がサポートしていないことをしようとしているようです。filterグラデーション (最高の状態では非常にバグがあります) を使用しても、古い IE はこのような複数の背景を処理できません。CSS 機能としては新しすぎて、IE8 と同じくらい古いブラウザーでサポートされるとは思えません。

filterスタイルをハックして動作させることはできるかもしれませんが、面倒です。私があなただったら避けます。

幸いなことに、別のオプションがあります: CSS3Pieです。これは、スタイルシートにプラグインし、CSS グラデーションや複数の背景画像など、IE の CSS サポートにさまざまな機能を追加する小さな JS ライブラリです。

これは、古い IE バージョンであっても、厄介なプロプライエタリ コードをすべて捨ててfilter、標準の CSS コードに置き換えることができることを意味します。

確かに、サイトにスクリプト コードが少し追加されますが、古いバージョンの IE でのみ読み込まれるため、他のユーザーには影響せず、コードの操作がはるかに簡単になります。

それが役立つことを願っています。

于 2013-07-16T10:59:44.097 に答える
2

残念ながら、上記のどれもうまくいきませんでした。私がやったのは、IE8専用のcssファイルに以下を追加することでした。

background: url(../../../../modules/contrib/panels/panels_ipe/images/icon-close.png) no-repeat #666666;

これは、上記の2つの提案よりもはるかに最悪のアプローチだと思いますが、それらを機能させることができないため、これを回答としてマークします。誰かが答えが誤解を招くと考えている場合、私は提案を受け入れます:)

于 2013-07-16T13:41:46.470 に答える
2

jsFiddle を見たり、あなたのサイトへのリンクを持っていない場合、私はここで多少推測していますが、複数の背景画像を試していますか? 画像 + 背景グラデーション?

IE8 は CSS3 仕様であるため、複数の背景画像をサポートしていません。ただし、これでうまくいく場合があります。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#383838", endColorstr="#666666",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/icon-save.png");

この質問を参照してください。

于 2013-07-16T10:49:06.627 に答える