7

友人が作成しているページ用の優れた CSSグラデーション コード ジェネレーターを見つけましたが、その下に気になるコメントがいくつかあります。

/* For Internet Explorer 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";    
        background-color: #CCC;

そして返信で：

これらに対して強くお勧めします！それらは同じように動作せず、制限があり、パフォーマンスを低下させ、レイアウトの問題を引き起こす可能性があります。簡単に言えば、IE はグラデーション (および他の多くの CSS 機能をフィルターなしでネイティブにサポートしていない) をサポートしていないため、同じ効果 (背景画像) に画像を使用するか、IE ユーザー (グラデーションを真剣に気にかけているユーザー) の経験が少ないことをクライアントに納得させます。狂った「デザイナー」以外の単一の色と比較して?) 彼らのブラウザーは、開発者としての私たちの望むものと一致しないからです。これはグレースフル デグラデーションと呼ばれ、IE も例外ではありません。

だから私が知らないのは、彼らがこのコードを使用する/使用しないことを提案すべきですか? IE にこのコードを使用させるのは役に立たない/絶望的ですか?

4

4 に答える 4

5

フィルターは一般的に悪い習慣と見なされており、有効な CSS ではありません (そのため、スタイルシートは検証テストに失敗します)。

問題の要素の背景画像を設定することが可能です。グラデーションをサポートしていないバージョンの場合、IE はその画像にフォールバックします。その利点は、グラデーションをサポートするブラウザーが背景画像を読み込まないことです (まあ、通常）、パフォーマンスに悪影響が及ぶことはありません。

個人的には、私があなただったら、背景画像ソリューションを選びます。これは、「フィルター」全体よりもはるかにクリーンであり、Internet Explorer を使用していない人を罰することはありません (イェイ!)

詳細については、こちらを参照してください: http://css-tricks.com/css3-gradients/

于 2012-09-11T13:30:13.187 に答える
2

http://www.colorzilla.com/gradient-editor/を使用して CSS グラデーションを作成しています。そこで生成されたコードは、IE 6 以降でも機能します。

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

はい、MS IE でグラデーションを使用できます。

于 2012-09-11T13:21:25.723 に答える
1

質問が出されてから 4 年が経過しましたが、この問題は解消されていません。私は大企業向けに多くのサイトを運営していますが、企業のデスクトップには IE8 があり、企業の標準になっていることもあります。

私の推奨事項は、提供されているとおりにこれらの行を使用することです。IE8 はそれらを使用し、最新のブラウザーはそれらを無視します。ブラウザの能力を最大限に発揮してデザインを実装することで、デザイナーは喜んでくれますが、縞模様の背景画像をいじる必要はありません。

于 2016-11-28T09:27:31.083 に答える
-1 
/* Internet Explorer 5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";    
        background-color: #CCC;
于 2014-04-23T05:34:01.643 に答える