IE 8及更低版本的渐变支持

Question

我为朋友正在制作的页面找到了一个很棒的CSS 渐变代码生成器,但是下面有一些评论让我担心:

/* For Internet Explorer 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";    
        background-color: #CCC;

并作出回应:

我强烈建议不要这些!它们的行为不同,受到限制,性能受损,并且可能导致布局问题.简单地说,因为IE不支持渐变(以及许多其他CSS功能本身,没有过滤器),要么使用图像获得相同的效果(背景图像),要么让客户说服IE用户获得较少的体验(严重关心渐变) vs疯狂的'设计师'之外的单色？)因为他们的浏览器与我们开发人员想要的不匹配.它被称为优雅降级,IE不应该是任何例外.

所以我不知道的是:我是否应该建议他们不使用这些代码？是否让IE使用此代码无用/无望？

Answer 1

过滤器的东西通常被认为是不好的做法,并且不是有效的CSS(因此你的样式表将无法通过验证测试)

可以为有问题的元素设置背景图像,如果它是一个不支持渐变的版本,IE将回退到该图像,它的美妙之处在于支持渐变的浏览器不会加载背景图像(嗯,通常)所以表现不会受到负面影响.

就个人而言,如果我是你,我会选择背景图像解决方案,它比整个"过滤器"更清洁,并且不会惩罚不使用Internet Explorer的人(是的!)

如果您想了解更多详情,请访问:http: //css-tricks.com/css3-gradients/