0

我在 IE8/9 中遇到了一个关于其渐变过滤器的特性。考虑以下样式：

background:#F2F2F2;
background:-webkit-linear-gradient(top,#F2F2F2,#CECECE);
background:   -moz-linear-gradient(top,#F2F2F2,#CECECE);
background:     -o-linear-gradient(top,#F2F2F2,#CECECE);
background:  linear-gradient(to bottom,#F2F2F2,#CECECE);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F2F2F2',endColorStr='#CECECE',GradientType=0)";

渐变在带有 的元素上正确显示display:block;。然而，当应用于display:table;IE9 时，将显示#F2F2F2在渐变的顶部。为了暂时解决这个问题，我删除了背景颜色，但当然现在我没有纯色后备。

我的问题是：为什么要这样做以及（no-js）解决方法是什么？

4

1 回答 1

0

filter渐变有许多主要限制和错误。看起来你已经发现了其中之一。

如果您的浏览器支持的基础级别是 IE9，那么您可能想要考虑使用 SVG 数据 URL 来进行渐变。对于 IE9 中的渐变，这是一个相当常见的解决方法。尽管它会使您的代码变得混乱且难以使用，但它至少运行良好。

您可以从此处生成 SVG 渐变数据 URL：http: //ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

如果您需要支持 IE8 或更早版本，这将无法正常工作，坦率地说，我认为您不会找到任何其他非 js 解决方案让您满意。（除了回到 old-skool 并使用 PNG 图像作为背景渐变）

我所知道的适用于所有 IE 版本的唯一好的解决方案是使用CSS3Pie 库。是的，这是一个 JS 库，所以它不符合您的非 js 标准，但它非常不具侵入性（其他浏览器会完全忽略它，甚至不会下载它）。它还具有允许您使用基于标准的代码进行渐变的优势，即使在非常旧的 IE 版本中也是如此。您仍然可以为那些禁用 JS 的用户提供纯色后备，因此您的网站应该在某种程度上适用于所有人。

于 2013-10-21T16:17:04.667 回答