1

現在のプロジェクトでは、CSSファイルでCSS3グラデーションを使用しています。IEブラウザーをサポートするために、フィルタープロパティも使用しました。以下は私のコードです：

.card.active .content.back {
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */

}

しかしfilter、上記のコードでプロパティを使用すると、border-radiusプロパティが機能しません。誰かがこれの修正を知っているなら、それを私と共有してください。

ありがとう

4

2 に答える 2

1

希望する結果を得るためにPIE.htcを使用できます。

PIEは、ProgressiveInternetExplorerの略です。これはIEに接続された動作であり、要素に適用されると、IEが多数のCSS3プロパティを認識して表示できるようにします。

PIEは現在、次のCSS3機能についてIE6から8に完全または部分的なサポートを追加しています。

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

さらに、PIEは、他の機能をネイティブにサポートしているIE9にborder-imageとlinear-gradientのサポートを追加します。

http://css3pie.com/

またはデモをご覧ください：-http：//jsfiddle.net/ZxzSs/1/

PIE.htcをサポートするには、Webサイトで機能するよりもPIE.htcファイルをルートフォルダに保持する必要があります。

于 2012-05-17T06:48:49.307 に答える
0

角が丸い要素の子にグラデーションを適用できるはずです。自宅のマシンでIE9にアクセスできませんが、これは機能するはずです。

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML：

<div class="element">
    <!--[if lt IE 9]><div class="ie-helper"><![endif]-->
    <p>Your content with gradient and rounded corners...</p>
    <!--[if lt IE 9]></div><![endif]-->
</div>

ページがIE10+または他のブラウザーで表示される場合、グラデーションと丸みを帯びた角の両方が同じ要素に適用されます（コードサンプルからベンダー固有のプレフィックスを戻すと仮定します）。条件付きコメントが使用されているため、内部div.ie-helperはIE9以下でのみレンダリングされます。

これは理想的ではありませんが、仕事を成し遂げることができますが、完全にサポートされるような幅広いブラウザを求めているので、これは合理的な回避策です。

于 2012-05-17T06:48:22.830 に答える