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

Question

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

这是我正在使用的CSS：

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

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

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

Answer 1

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

CSS重置（无论是你的还是第三方）将确保所有浏览器在样式方面都有类似的起点，因为不同的浏览器在不同的元素上没有相同的样式默认值。

此外，正如@thirtydot在his answer中所说，某些浏览器会忽略完全空表格单元格的高度，例如<td></td>。为了确保不被忽略，您应该向这些单元格添加一些内容，这是一个很好的选择，即非中断空间 -  ，以这种方式：<td>&nbsp;</td>。

Answer 2

你的细胞都是空的，对吗？ <td></td>？

一个绝对有效的修复方法是在每个单元格中粘贴 ：<td>&nbsp;</td>。

有关其他一些想法，请参阅：CSS table, table-cell height issue in Firefox

Answer 3

首先重置HTML代码默认属性，例如padding，margin，height，width.etc ..，然后将你的风格应用于工作

更好的重置css是Eric Mayer's