css - CSS显示：表格；Chrome上的间距问题

Question

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

知道问题出在哪里吗？

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

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

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

Answer 1

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

Answer 2

我还会将空格视为可能的违规者并使用font-size: 0.

Answer 3

我会在所有浏览器上重置边距和填充。

*{margin:0; padding:0;}

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

normalize.css或reset.css

Answer 4

这个问题的答案解决了我的问题：Chrome中的CSS表格单元格

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

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

Answer 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>

看起来在 google chrome 中，当它应用于同一个标签时，宽度和 display:table 存在冲突。

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

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

https://jsfiddle.net/2u1t8ffj/