双边框 CSS3 - FF !Chrome答案

【问题标题】：Double border CSS3 - FF !Chrome双边框 CSS3 - FF !Chrome
【发布时间】：2011-09-27 22:51:33
【问题描述】：

我想知道，为什么表格TDs 上的这个双边框不会在 Chrome 中显示，而只会在 FF 中显示？有什么想法可以解决吗？谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

另一个优点是它适用于所有浏览器，包括不支持box-shadow的旧浏览器。

【讨论】：

嗯，我使用 box-shadow 的原因是因为我想在另一个上面有一个两种颜色的边框（中间没有空格），正如它在原始小提琴上显示的那样。我不确定是否可以使用double 获得相同的结果
嗯，也许不是；我认为double 边框仅限于单色......但是当我使用 Firefox 3.6 时，我看不到原来的小提琴，box-shadow 对我不起作用。抱歉，我错过了重点。

【解决方案2】：

增加边框的粗细，以查看更多obvious demonstration 两种浏览器之间的渲染差异。似乎在 FF 中，box-shadow 覆盖在边框的顶部，在 Chrome 中它隐藏在下方。

您可以使用另一种方法 - 可能使用结合了 text-decoration: underline 的边框底部。

【讨论】：

【解决方案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;

【讨论】：