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之间的外观存在一些差异，我不确定它是否受到不同brwosers差异的影响。有没有办法通过CSS修复它？

  

示例：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;
}

  

演示：http://jsfiddle.net/AndyE/B2fjn/1/

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

Answer 2

border（css）的正确语法是：border: 1px solid #FFF;。 现在，改变你的CSS：

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

如果有任何问题（如你的），有些浏览器可以纠正css代码，但有些浏览器没有。所以，请检查新的CSS代码是否有效。如果没有，请发布显示文档的两个浏览器的屏幕截图。谢谢。

Answer 3

就我而言，边框问题会在 Firefox 中的元素之间产生偏移。

解决方案：将此 css 规则添加到您的边框元素中。

div{
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  ...
}