Question

好的，我一直在寻找几个小时并且找到答案，但似乎没有一个对我有用。我正在尝试使用我在colorzilla.com上生成的渐变背景。以下是我的代码。要“完成”ie 9支持colorzilla说：支持使用IE9完全多站点渐变（使用SVG）。

为所有具有渐变的元素添加“渐变”类，并将以下覆盖添加到HTML中以完成IE9支持：

<!--[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>

Answer 1

看起来您正在将渐变应用于HTML标记，因此您可以将其用于条件块：

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

您可以将其放在上面列出的代码中的阻止之后（</style>和<meta>之间）。

希望这有帮助！

Answer 2

您可以将代码放在<head>代码中，如此。

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

我在哪里为IE上的渐变背景添加此条件注释？

2 个答案: