Question

我为朋友制作的网页找到了一个很棒的CSS gradient code generator，但是下面有一些评论让我担心：

/* 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/

Answer 2

我正在使用http://www.colorzilla.com/gradient-editor/来创建CSS渐变。生成的代码甚至可以在IE 6 +中使用：

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

所以是的，您可以在MS IE中使用渐变。

Answer 3

问题提出四年后，这个问题并没有消失。我为大型企业做了很多网站，你仍然在企业桌面上找到IE8，有时甚至是公司标准。

我的建议是完全按照提供的方式使用这些行。 IE8将使用它们，任何现代浏览器都会忽略它们。它让设计师感到高兴，因为你正在以最好的浏览器能力实现他的设计，但你不必乱用条纹背景图像。

Answer 4

/* Internet Explorer 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 8及更低版本的渐变支持

4 个答案: