Css IE 8及以下版本的渐变支持

我为我朋友正在制作的页面找到了一个很棒的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用户获得的体验较少（除了疯狂的“设计师”外，谁还真的关心渐变与单色？）因为他们的浏览器根本不符合我们开发者的要求。这被称为优雅降级，IE也不应例外

所以我不知道的是：我应该建议他们使用/不使用这些代码吗？让IE使用这段代码是无用的/没有希望的吗？

我用它来创建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中使用渐变。

过滤内容通常被认为是不好的做法，并且不是有效的CSS（因此你的样式表将无法通过验证测试）

可以为所讨论的元素设置背景图像，如果它是不支持渐变的版本，IE将退回到该图像，其美妙之处在于支持渐变的浏览器不会加载背景图像（通常是这样），因此性能不会受到负面影响

就个人而言，如果我是你的话，我会选择背景图像解决方案，它比整个“过滤器”要干净得多，而且不会惩罚不使用Internet Explorer的人（耶！）

如果您想了解更多详细信息，请参见此处：

---

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

---

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

是的，我知道

filter

不是CSS规范的一部分，但另一方面，IE 8是第一款支持CSS 2.1的Microsoft Windows浏览器。因此，当谈到IE女士的造型时，我不在乎任何规格说明。否则，我无法为这些浏览器创建CSS布局。（这是一个回复，但之前的评论被删除了…）我感觉到了费埃拉的评论。当有一个假定的规范时，这很困难，但是过去和现在的浏览器都不支持该规范。如果创建的浏览器不遵循规范，那么规范的意义何在？这似乎是一个很好的遵循，但验证只是一个观点。在大多数使用情况下，渐变图像不是一个替代方案，因为它们不会拉伸或收缩以适合所使用的元素。过滤规则如何惩罚非IE用户？如果您想拥有更干净/有效的CSS文件，可以将这些规则移动到单独的

ie.CSS

。你在哪里读到“过滤材料通常被认为是坏习惯”。这是您个人的意见。@feela-不良做法可能是错误的术语，但过滤器不是标准的，供应商前缀是。你只需要记住每个浏览器的前缀，但是，像大多数与IE相关的东西一样，你必须站在头上，挥动手臂才能让事情正常工作。@feeela为什么要担心IE，而不是任何其他不支持渐变的浏览器？我知道很难想象人们会使用“另类”浏览器，但却不让它保持最新，但就在去年，我抓到一位客户使用了一款仿古版的Safari。梯度传达的信息要么重要，要么不重要（如果重要，你在为盲人做什么？）。如果不是，那么您可以像对待任何其他不支持渐变的浏览器一样对待它。值得注意的是，IE滤光片只能使用2个色挡。@cimmanon“为什么要担心IE”，因为我的所有客户都将其作为一项要求，并为此付费。还不错。但没有客户为Firefox2的修复付费。这就是自由市场经济的全部原因。

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