表格样式的元素无法正确显示 IE 渐变

Question

我在 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。为了暂时解决这个问题，我删除了背景色，但当然现在我没有纯色后备。

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

Answer 1

filter 渐变有许多主要限制和错误。您似乎发现了其中之一。

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

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

如果您需要支持 IE8 或更早版本，这将不起作用，坦率地说，我认为您不会找到任何其他非 js 解决方案可以满足您的需求。 （除了回到老派并使用PNG图像作为背景渐变）

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