0

好的，我已经搜索了几个小时并找到了答案，但似乎没有一个对我有用。我正在尝试使用在 colorzilla.com 上生成的渐变背景。下面是我的代码。要“完成” ie 9 支持 colorzilla 说： 使用 IE9 支持完整的多级渐变（使用 SVG）。

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

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

但是我一生都无法弄清楚在哪里放置评论或应该在哪里放置“渐变”类

我必须在明天早上把这个上交（啊！）请帮忙！

代码（没有注释）：

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

2 回答 2

0

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

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

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

希望这可以帮助！

于 2012-04-16T20:51:26.260 回答
0

您可以像这样将代码放在<head>标签中。

<head>
    <!--[if gte IE 9]>
      <style type="text/css">
        .gradient {
           filter: none;
        }
      </style>
    <![endif]-->
</head>
于 2013-07-04T18:13:55.080 回答