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

我发现在同一时间应用css渐变过滤器时，表格单元格上的css边框会丢失。看起来渐变效果覆盖了边框。当在IE8中应用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，你可以看到边界逐渐浮出水面。它证实了我的猜测，即梯度效应显示在边界之上。

来源

2010-08-12 Chris

很棒的发现。正如你所说，渐变覆盖了边框，因为如果将边框设置得更大，则渐变将扩展并覆盖边框。我搜索了一个解决方案，但没有结果..希望有人知道一个把戏 – Sotiris 2010-08-12 09:28:07

+1感谢发布这个 – 2010-12-23 16:46:25

我已经找到了解决，但你可能不喜欢它...

如果您在IE渲染quirks mode边框呈现好的，如果你正在使用兼容模式它只是模糊。在IE8比较这两个页面：

还有什么工作是单击兼容性视图按钮，但我试图与compatibility mode meta tags获得相同的结果是不成功的。我试过使用box-sizing，但也没有成功。我总结出让它按照你想要的方式工作的唯一方法是强制IE进入怪异模式，但是这可能会为布局创建太多其他问题，以至于只需添加一个用于附加渐变背景的包装元素即可。

来源

2010-08-12 11:24:03 robertc

我得到了同样的结果，并没有在IE8中声明DOCTYPE。它有魔力吗？ – BILL 2013-11-06 08:57:40

@Victor我不知道，你会得到什么结果？ – robertc 2013-11-06 09:02:34

我得到带有边框的表格单元格，我注意到如果我在开发人员工具中使用设置了ie8模式的IE10，它没有得到任何结果。为了在IE中正确测试带边框的渲染单元格，我必须使用原始ie8而不设置浏览器模式。我得出的结论是IE9和IE8浏览器模式在IE9，IE10或IE11不一样。 – BILL 2013-11-06 09:52:25

应用这也适用：

position: relative; 
z-index: -1;

来源

2010-12-12 23:51:07 frizz

这绝对会让边框显示出来，但是（对我来说）清除了单元格内的所有内容;包括背景; – 2010-12-23 16:45:25

这对我有效，谢谢！ – Monica 2011-06-08 17:30:49

只是位置：相对;是我所需要的。 – eddiegroves 2011-09-06 06:19:17

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

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

来源

2012-07-20 13:44:31 Stormalong

这是正确的答案 – Omu 2012-09-27 22:07:45

同意。在IE8上唯一能够解决背景和边框问题的问题。 – Tukkan 2014-06-10 14:06:47

使用位置：相对！重要;

它的做工精细...

来源

2012-07-26 11:17:31

我发现我并不需要！重要的，尽管它也适用于此。还要注意，这需要应用于td而不是表格 – icc97 2013-03-29 16:47:31

对TD：

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

为我工作。

也可能要与边境崩溃尝试为这个错误的行为不同

border-collapse: separate

和

border-collapse: collapse

来源

2013-04-04 14:41:08 user2245339

之间尝试很多修正，我得出的结论后，它的根本不值得尝试使用过滤CSS。一个quote from @mdo谁是Twitter的引导CSS背后：

过滤器是危险的企业在IE浏览器，尤其是7 & 8.我宁愿不包括那些因为它会是谁对他们用眼过度乡亲巨大的性能损失。

问题我打申请的CSS td元素：

的position: relative仅适用于IE9，IE8不
的z-index: -1不会对TD元素工作
如果你有一个过滤器然后你必须把它关闭悬停
我的表看起来更好有边界比在表格单元格上的梯度

来源

2013-04-11 10:27:23 icc97

我试过所有这些解决方案都没有成功。所以，我将梯度放在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中也有非常广泛的浏览器支持。

来源

2014-07-16 17:55:49

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

回答

相关问题