2012-04-16 2 views
0

私は何時間も探していて、答えを見つけましたが、私にはうまくいかないようです。私はcolorzilla.comで生成したグラデーションの背景を使用しようとしています。以下は私のコードです。 IE9で完全なマルチストップグラジエント(SVGを使用)をサポートしています。IEのグラデーションの背景には、この条件付きコメントをどこに配置しますか?

勾配を持つすべての要素に「勾配」クラスを追加し、IE9のサポートを完了するために、あなたのHTMLに次のオーバーライドを追加します。

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

しかし、私は、私の人生は把握することはできませんのためにどこにコメントを書くか、またはどこに "グラデーション"クラスを置くべきか

私は明日の朝(AH!)にこれを入れなければなりません!

(コメントなし)コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD> 
<META content="text/html; charset=utf-8" http-equiv=Content-Type> 
<STYLE type=text/css>HTML { 
    TEXT-ALIGN: center; FONT-FAMILY: Arial, Helvetica, sans-serif;background: #0067ad; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjdhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzI2ODhkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MWExY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #0067ad 0%, #2688d1 52%, #61a1cc 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0067ad), color-stop(52%,#2688d1), color-stop(100%,#61a1cc)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #0067ad 0%,#2688d1 52%,#61a1cc 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #0067ad 0%,#2688d1 52%,#61a1cc 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #0067ad 0%,#2688d1 52%,#61a1cc 100%); /* IE10+ */ 
background: linear-gradient(top, #0067ad 0%,#2688d1 52%,#61a1cc 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0067ad', endColorstr='#61a1cc',GradientType=0); /* IE6-8 */ 
COLOR: #666666; FONT-SIZE: 18px 
} 
BODY { 
    TEXT-ALIGN: center; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #fffde7; FONT-SIZE: 18px 
} 
#content { 
    TEXT-ALIGN: justify; MARGIN: 0px auto; WIDTH: 720px 
} 
IMG { 
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px 
} 
</STYLE> 

<META name=GENERATOR content="MSHTML 8.00.6001.18975"></HEAD> 
<BODY> 
<p><IMG alt=" Transcender IT Certification Success" 
src="http://www.transcender.com/images/logo.png" width=268 height=64></p> 
<p><img src="http://www.transcender.com/images/downpostit.png" alt="Transcender will be right back" width="284" height="280"><BR> 
    <BR> 
</p> 
<DIV id=content> 
    <p>Sorry for the inconvenience, but the Transcender website will be 
    unavailable Saturday, April 21st for routine 
    maintenance. Please come back and visit us again on Sunday, April 22nd and get 
    10% off your next order*. Use promo code: <B>MANDOWN12</B>. <br> 
    <br> 
    *Offer expires 4/23/12, excludes cd &amp; voucher purchase option 
<BR> 
    <BR> 
    <BR><BR> 
    </p> 
</DIV></BODY></HTML> 

答えて

0

あなたはHTMLタグにグラデーションを適用しているように、あなたの条件ブロックのためにこれを使用すると思いますので、それは、見えます:

<!--[if gte IE 9]> 
    <style type="text/css"> 
    html { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

そして、上記のコードのブロックの後に置きます(</style><meta>の間)。

希望すると便利です。

0

あなたのコードは、<head>タグの中に配置します。

<head> 
    <!--[if gte IE 9]> 
     <style type="text/css"> 
     .gradient { 
      filter: none; 
     } 
     </style> 
    <![endif]--> 
</head> 
関連する問題