我有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声明之前或之后忽略了条件。 (我已经测试过,而且[如果错误]等等) 有什么想法吗?
答案 0 :(得分: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上优雅地降级。