Question

我发现在同时应用css渐变滤镜时，表格单元格上的css边框丢失了。似乎渐变效果会覆盖边界。

这是一个浏览器错误还是我错过了什么？

样式定义如下：

.c7 {
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid;
    width: 100px;
    height: 30px;
}

[更新]您可以应用不透明度过滤器并将其从100减少到1，您可以看到边框是如何逐渐出现的。它证实了我的猜测，渐变效果显示在边界上。

Answer 1

应用它也有效：

position: relative;
z-index: -1;

Answer 2

我找到了修复但你可能不喜欢它......

如果在quirks mode中的IE渲染中边框渲染正常，则只有在使用兼容模式时才会遮挡它。比较IE8中的这两个页面：

单击兼容性视图按钮也有效，但我尝试使用compatibility mode meta tags获得相同的结果是不成功的。我尝试使用box-sizing，但也没有成功。我总结了让它按照你想要的方式工作的唯一方法是强制IE进入怪癖模式，但这可能会为布局创建许多其他问题，你可能最好只需添加一个包装元素来附加渐变背景。 / p>

Answer 3

使用DIV包含每个单元格中的内容。将渐变应用于DIV并将边框放在单元格上。渐变将限制为DIV，不会覆盖边框。

http://jsfiddle.net/WWCaj/1/

Answer 4

在尝试了很多修复之后，我得出结论，它根本不值得尝试使用过滤器CSS。一个quote from @mdo谁是Twitter bootstrap css的背后：

过滤器在IE中是危险的，尤其是7＆amp; 8.我宁愿不包括那些因为过度使用它们的人会造成巨大的性能损失。

我将css应用于td元素的问题：

position: relative仅适用于IE9，不适用于IE8
z-index: -1不适用于td元素
如果您有过滤器，则必须将其关闭才能悬停
我的表格看起来比边框表格更好有边框

Answer 5

使用position：relative！important;

工作正常......

Answer 6

在td：

  /* enough for IE9 */
  background-origin: padding-box;
  background-clip: padding-box;
  /* for IE8 */
  position: relative;

为我工作。

你也可能想尝试边框折叠，因为这个错误在

之间表现不同

  border-collapse: separate

和

  border-collapse: collapse

Answer 7

我尝试了所有这些解决方案但没有成功。所以，我将渐变放在tr中，然后决定使用:: before伪元素并在其上设置边框样式。但是，我甚至没有为伪元素添加边框。以下就够了。

 table thead {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th { 
   background: none;
   border-right: 1px solid #a5a694; 
   background-clip: padding-box;
   position: relative!important; 
   z-index: 100;
}
table th:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
}

但是，如果这不起作用，您还可以像我原先计划的那样为伪类添加边框：

table th:before {
    border-right: 1px solid #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: 1000;
}

伪类非常棒，我一直使用它们，即使在IE8中也支持非常广泛的浏览器。

在IE8中应用css渐变滤镜时，表格单元格会丢失边框

7 个答案: