表格样式的元素不能正确显示IE渐变

我已经在IE8/9的关于其渐变过滤器的特性中运行过。考虑以下样式：表格样式的元素不能正确显示IE渐变

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）解决方法？

来源

2013-10-21 philtune

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

如果您的浏览器支持的基础级别是IE9，那么您可能需要考虑使用SVG数据网址作为渐变。这对于IE9中的渐变是一个相当常见的解决方法。尽管它可能会让你的代码变得杂乱无章，但它至少能够很好地工作。

您可以生成从这里的SVG梯度数据网址：如果您需要支持IE8或更早http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

，这是不行的，坦白说，我不认为你会发现任何其他非JS解决方案，将满足你。（除了回到旧的skool和使用PNG图像作为背景渐变）

我知道的唯一一个适用于所有IE版本的好方案是使用CSS3Pie library。是的，这是一个JS库，所以它不符合你的非JS标准，但是它非常不引人注目（其他浏览器会完全忽略它，甚至不会下载它）。它还具有允许您即使在真正旧的IE版本中也可以为您的渐变使用基于标准的代码的优势。您仍然可以为那些禁用JS的用户提供纯色回退，因此您的网站应该适合每个人到某个级别或另一个级别。

来源

2013-10-21 16:17:04 Spudley

我尽量多的。这似乎是这样一个随机故障。但IE8的哪一部分不会受到**随机**毛刺的困扰？ IE8仍然困扰着我们，因为我们的大部分用户仍然从未升级到9（来的人!!!）的学校或工作场所登录。我不知道CSS3PIE不能在非IE浏览器上下载。我敢肯定，如果老板对此抱怨，我最终会走这条路。目前，默认平坦背景不会弄乱太多羽毛。 - 非常感谢！ – philtune

表格样式的元素不能正确显示IE渐变

回答

相关问题