css - Border 样式的 Firefox 和 Chrome 之间的不同外观

Question

代码如下。我对这个问题很困惑。

table td{
    padding:10px;
    background:#415DA1;
    border-top:solid 10px #F00;
    border-right:solid 10px #CCC;
    border-bottom:solid 10px #F00;
    border-left:solid 10px #CCC;
}

<table>
    <tr>
        <td>Test</td>
        <td>Test</td>
    </tr>
</table>

Firefox 和Chrome 的外观有些差异，不知道是不是浏览器不同造成的。有什么方法可以通过 CSS 修复它吗？

Example: http://jsfiddle.net/AndyE/B2fjn/

Answer 1

这只是不同的边框绘制实现。您会注意到 IE 和 Opera 也存在差异:

我没有测试 Safari，但我希望它看起来与 Chrome 一样，因为它们使用相同的渲染引擎。

我能想到的跨浏览器获得一致边框的唯一方法是设置 border-collapse至 separate在 <table> 上元素:

table {
    border-collapse: separate;
}

不幸的是，这意味着您有一个新问题需要解决——现在将有 2x 10px每个单元格之间的边界。您可以通过更改标记或添加额外的 CSS 规则来解决此问题。例如，我将 CSS 更改为以下内容:

table {
    border-collapse: separate;
}

table td{
    padding:10px;
    background:#415DA1;
    border-top:solid 10px #F00;
    border-right:solid 5px #CCC;
    border-bottom:solid 10px #F00;
    border-left:solid 5px #CCC;
}

table td:first-child {
    border-left-width: 10px;
}
table td:last-child {
    border-right-width: 10px;
}

Demo: http://jsfiddle.net/AndyE/B2fjn/1/

这提供了您在现代浏览器中可能期望的良好结果，但在 IE 6-8 中看起来并不那么好。您需要进行试验，直到获得可能的最佳结果。