双边框CSS3 - FF！Chrome

Question

我想知道，为什么桌面TDs上的这个双边框不会在Chrome中显示但只会在FF中显示？任何想法可能是什么工作？谢谢！

http://jsfiddle.net/yQQLk/1/

Answer 1

当box-shadow属性本身已经支持双边框时，不确定为什么要使用border来生成双边框。只需使用以下CSS而不是您所拥有的：

td {
    border-bottom: 3px double red;
}

请注意，您需要将边框的大小增加到3px，以便显示两条线（使用1px，当您指定{时，它有时根本不显示{1}}）。

另一个优点是，这适用于所有浏览器，包括不支持double的较旧浏览器。

Answer 2

增加边框粗细以查看两个浏览器之间的渲染差异obvious demonstration。似乎在FF中，盒子阴影覆盖在边框的顶部，在Chrome中它隐藏在下面。

你可以使用另一种方法 - 也许使用边框底部结合文本修饰：下划线。

Answer 3

试试这个，它适用于两种浏览器：

td {
     -moz-box-shadow: 0 1px  0 #000;
 -webkit-box-shadow: 0 1px  0 #000;
        border-bottom: 1px solid red;
         box-shadow: 0 2px  0 #000;

}

我想，这就是问题所在：box-shadow: 0 1px 0 #000;