条件付きCSSを使用してグラディエントイメージをIEに表示する

これまでコンディションを使用したことはありませんでした（ただし、最終的にはIEを嫌うことは知っていました）。基本的に、私は、CSSグラデーションを使用して私のウェブサイトの上部にあるバナーを持っている：条件付きCSSを使用してグラディエントイメージをIEに表示する

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.44, #2B7BB8), 
    color-stop(0.72, #4394CE), 
    color-stop(0.86, #58A8E1) 
);

だから、私はIEのすべてのバージョンのGIMPで製造した勾配画像をロードするために条件文を追加しました：

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]--> 
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

自分のコンピュータ（linux）にIEがないので、Adobe Browser Labsを使用して、自分のウェブサイトがIEでどのように見えるかをテストしました。ただし、イメージはまだ読み込まれません。私のCSSの最終版は次のようになります：

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.44, #2B7BB8), 
    color-stop(0.72, #4394CE), 
    color-stop(0.86, #58A8E1) 
); 

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]--> 
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

私は何か間違っていますか？

出典

2011-12-17 n0pe

何IE10がリリースされると、それはCSS3グラデーションをサポートしている場合はどうですか？ブラウザの検出ではなく機能検出を使用する –

良い点、私は 'if lt IE9'に変更する – n0pe

実際に私はそれを調べ、MicrosoftはIE10で条件付きコメントを取り除き、グラデーションはIE9でサポートされていないので、 '<！ - [If IE] - >' –

http://www.quirksmode.org/css/condcom.html

あなただけのHTMLファイル内に、CSSファイルに条件付きコメントを行うことはできません。

ですから、にスタイル要素をラップした場合、それが動作するはずはCSS3グラデーションのみIE10でサポートされているとの条件付きコメントはIE10で削除されている、それを見上げました。したがって、その条件付きコメントですべてのバージョンのIEをターゲットにすることができます。

出典

2011-12-17 17:20:32

これは動作するはずです：それが表示されます

/* For Internet Explorer 8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E1E1E1');

出典

2011-12-17 17:16:55

ベストプラクティスは、ブラウザの盗聴や条件付きのコメントではなく、機能の検出を使用することです。さらに、これらの条件付きコメントはIE10で消えてしまいますので、これはすぐに機能しなくなります。

Modernizr.com（私はこれが直接ここに役立つとは思わない）とh5bp.com（HTML5 Boilerplateドットコム）の2つのプロジェクト（もちろんFOSS）をチェックアウトする必要があります。後者は偉大なベストプラクティスがぎっしり詰まっていると、特に1はそうのようなHTMLに条件付きコメントを使用することです。これは、本質的にあなたのhtml要素に異なるクラスを設定することを

<!doctype html> (you don't have to use HTML5 here, this will still work) 
<!--[if lt IE 7]> <html class="no-js ie678 ie6" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie678 ie7" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie678 ie8" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

注意を。したがって、ユーザーがIE8を使用している場合、HTML要素にクラスie8およびie678が存在します。

.ie678 { background-image:url('img/ieback.png'); } 
.ie678 { background-repeat:repeat-x; }

そして当然、これらの二つのスタイル規則が有効になります。

はその後、あなたのCSSに、あなたは、単にこのような何かをする必要があります。

運が良かった！

PS。上記のModernizr.comについては、そのすべての機能の検出について言及しています。は、CSSグラデーションがサポートされているかどうかを検出するために使用しますが、IEフィルタが機能するかどうかを必ずしも伝えるものではありません。しかし、勾配が機能しているかどうかを簡単に検出し、そうでない場合はMSフィルタを使用して、最良の状態を期待することができます。私は、条件付きコメントは、あなたが何をしているのかと思っています。

出典

2011-12-17 17:29:50 mkoistinen

これはクールです、私はそれを知らなかった。ありがとう – n0pe

使用CSS3パイ代わりhttp://css3pie.com/documentation/supported-css3-features/

出典

2011-12-17 17:34:32 aWebDeveloper

条件付きCSSを使用してグラディエントイメージをIEに表示する

答えて

関連する問題