CSS显示：表格； Chrome上的间距问题答案

【问题标题】：CSS display:table; spacing issue on ChromeCSS显示：表格； Chrome上的间距问题
【发布时间】：2012-11-02 15:07:49
【问题描述】：

我在div元素上使用display:table;。在我测试过的所有其他浏览器上都没有问题。但是，在 Chrome 22（最新版）和 Canary 上，div 的左右两侧间距均为 1px。

知道问题出在哪里吗？

编辑：
margin,border,padding 都是 0。

此外，所有表格属性都将被删除：

border-spacing:0;
border-collapse:collapse;
table-layout:fixed;

【问题讨论】：

任何小提琴？您是否使用 reset.css 或任何此类重置所有元素。如果没有，我建议使用一个。
你的意思是 1px 内边距还是边距？如上所述，我建议尝试使用 reset.css 文件。
事实是，两者都不是。 padding为0，margin为0，border为0。然后border-spacing:0;border-collapse:collapse;table-layout:fixed;。
你能设置 div 有一个margin: 0 -1px吗？
我可以，但这会影响其他正常运行的浏览器。

标签： css google-chrome

【解决方案1】：

我遇到了同样的问题。它是由 Micro clearfix hack 引起的。删除 .clearfix 样式解决了这个问题。

【讨论】：

【解决方案2】：

我还将空格视为可能的违规者，并使用font-size: 0 进行测试。

【讨论】：

这是个好主意。下周我会试一试。谢谢。

【解决方案3】：

我会重置所有浏览器的边距和内边距。

*{margin:0; padding:0;}

请注意，如果需要，您也可以下载重置 css 文件。

normalize.css 或 reset.css

【讨论】：

我已经编辑了我的答案。它不是边距或填充。我会说这是浏览器的怪癖。

【解决方案4】：

这个问题的答案解决了我的问题：CSS Table Cell In Chrome

他们建议将table-layout: fixed 添加到您已应用display: table 的元素中。

如果您的标记没有应用.clearfix hack，就像我的情况一样，这可能会对您有所帮助！

【讨论】：

【解决方案5】：

我早在 2015 年就注意到了这个问题 - 它只影响谷歌浏览器，解决它的唯一方法是将你的 display:table 移动到子容器中，所以如果你有：

<div style="width:50%; height:300px; display:table">
     <div style="display:table-cell; vertical-align: middle;">
          <p>Your centred content here</p>
     </div>
</div>

改成下面这样多加一个div：

<div style="width:50%;">
     <div style="display:table; height:300px;">
          <div style="display:table-cell; vertical-align: middle;">
               <p>Your centred content here</p>
          </div>
     </div>
</div>

看起来在谷歌浏览器中，当它应用于同一个标签时，宽度和 display:table 存在冲突。

在 chrome 和 firefox 中打开以下链接，您会看到右边框在 firefox 中对齐，但在 chrome 中不对齐，因为它增加了 1px 的额外间隙。

长话短说，我的修复适用于 chrome:)

https://jsfiddle.net/2u1t8ffj/

【讨论】：