Html 为什么表格单元格在不同的浏览器中显示不同？

以下是显示问题的屏幕截图：

以下是我正在使用的CSS：

#board table {
    background: #eef0ff;
    border-spacing: 0px;
    border: 1px solid #475476;
}

#board td {
    height: 20px;
    width: 20px;
    border: 1px solid #cfd7ee;
}

如何在不同的浏览器中使单元格大小相同？有人知道为什么Opera和Firefox会收紧单元格吗？

您需要在设计中使用，或者为表格边距、填充和其他元素设置一些自己的默认值

CSS重置（您的或第三方的）将确保所有浏览器在样式方面有一个相似的起点，因为不同的浏览器在不同的元素上没有相同的样式默认值

---

此外，正如@thirtydot在中所说的，一些浏览器会忽略完全空表单元格的高度，例如

。为了确保它不会被忽略，您应该向这些单元格中添加一些内容，一个好的选择是不间断空格-

，这样：

您的单元格都是空的，对吗<代码>

一个肯定有效的修复方法是在每个单元格中粘贴一个

：

---

有关其他一些想法，请参见：

首先重置HTML代码的默认属性，如填充、边距、高度、宽度等，然后将样式应用于工作

---

更好的重置css是默认样式。比如边距和填充。这就是为什么有些人喜欢使用重置文件。比如梅耶的这张。有些人喜欢覆盖相关的默认样式，找出确切的原因，而不添加一个全新的默认样式替换来学习。不知道为什么这会被否决，我几乎肯定是正确的。在Firefox/Chrome中进行比较：我没有投你反对票，但我看了看你的JSFIDLE，两个单元格完全相同。而且，这个答案并不能解决这个问题。我希望这有助于减少你的压力certainty@Abe佩特里罗：这是问题的解决方案。在最初的问题中，这些单元格在Chrome+IE中看起来很好，在Opera+Firefox中被压扁。你猜怎么着：。ಠ_ಠ我没有投反对票，但我认为在这种情况下你的答案不正确。看看我的答案。@30点-可能吧。我想我们都得到了部分答案。嗯，不是真的。没有常见的CSS重置可以解决此问题。当然，重置可能有助于解决其他不一致的问题，但它不会解决这个问题。伙计们，没有一个答案是没有帮助的。也不包括reset.css。@user1048261-同时给出

TR

a

height

。