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

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

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

如果你在怪癖模式下在IE中渲染边框呈现正常,只有在你使用兼容模式时它才会被遮挡.在IE8中比较这两个页面:

• 随着DOCTYPE声明
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-1.png
• 没有DOCTYPE声明
  • http://www.boogdesign.com/examples/css3/borders-tables-gradients-2.png

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

Answer 3

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

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