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

【问题标题】：Why are table cells displayed differently in different browsers?为什么表格单元格在不同的浏览器中显示不同？
【发布时间】：2019-01-16 21:41:03
【问题描述】：

这是显示问题的屏幕截图：

这是我正在使用的 CSS：

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

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

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

【问题讨论】：

这是默认样式。诸如边距和填充之类的东西。这就是为什么有些人喜欢使用重置文件的原因。比如迈耶的这个。 meyerweb.com/eric/tools/css/reset
有些人喜欢只覆盖相关的默认样式，找出确切原因而不添加一个全新的默认替换来学习。

标签： html css css-tables

【解决方案1】：

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

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

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

【讨论】：

我没有投反对票，但在这种情况下，我认为您的答案不正确。看看我的回答。
@thirtydot - 可能。我想说我们都得到了部分的答案。
嗯，不是真的。没有常见的 CSS 重置可以解决此问题。当然，重置可能有助于解决其他不一致问题，但它不会解决这个问题。
伙计们，没有一个答案没有帮助。和 reset.css 都没有。
@user1048261 - 也给TR 一个height。

【解决方案2】：

你的单元格都是空的，对吧？ <td></td>?

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

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

【讨论】：

不知道为什么这会被否决，我几乎可以肯定正确。在 Firefox/Chrome 中比较：jsfiddle.net/thirtydot/L3EQJ
我没有对你投反对票，但我查看了你的 jsfiddle，两个单元格完全相同。此外，这个答案不是问题的解决方案。我希望这有助于降低您的确定性
@Abe Petrillo：这是解决问题的方法。在最初的问题中，单元格在 Chrome + IE 中看起来很好，在 Opera + Firefox 中被挤压。你猜怎么着：i.stack.imgur.com/3aoQF.png。 ಠ_ಠ

【解决方案3】：

首先重置您的 HTML 代码默认属性，例如 padding、margin、height、width.etc..，然后将您的样式应用到工作中

更好的重置css是Eric Mayer's

【讨论】：