0

我有 1 个 div，我想对其应用渐变和背景图像（是的，在同一个元素上）。我知道只有当您的目标浏览器不是 IE 时才有可能。考虑到这一点，我想到了应用纯色而不是渐变，并在其上仅用于 IE 的图像。

这是我的代码：

background: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat, repeat;
<!--[if IE]>
background: #000 url(../images/newsletter.png) center left no-repeat;
<![endif]-->

问题是在 FF/Chrome 声明之前或之后忽略了条件。（我已经测试了 [if false] 等）有什么想法吗？

4

1 回答 1

5

您不会在 CSS 中添加那种条件；它在您的 HTML 中。因此，使用 IE 修复创建一个新样式表，并在条件注释中链接到它：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

例如。但是，这是一般情况；您可以将您现在拥有的内容重写为：

background-color: black;
background-image: url(../images/newsletter.png);
background-image: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background-image: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat;

在没有丑陋的条件注释的情况下优雅地降级，并且不会在 Internet Explorer 上完全优雅地降级。

于 2012-07-29T22:18:53.363 回答