7

我为朋友正在制作的页面找到了一个很棒的 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 使用此代码是无用/无望的吗？

4

4 回答 4

5

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

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

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

如果您想了解更多详细信息，请参见此处： http ://css-tricks.com/css3-gradients/

于 2012-09-11T13:30:13.187 回答
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 中使用渐变。

于 2012-09-11T13:21:25.723 回答
1

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

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

于 2016-11-28T09:27:31.083 回答
-1 
/* 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;
于 2014-04-23T05:34:01.643 回答