CSS显示：表; Chrome上的间距问题

Question

我在display:table;元素上使用div。 在我测试过的所有其他浏览器上都没有问题。 但是，在Chrome 22（最新）和Canary上，div在左右两侧都有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

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

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

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

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>

在谷歌浏览器中看起来与宽度冲突并且显示：table应用于同一标签时。

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

长话短说，我的解决方案适用于chrome：）

https://jsfiddle.net/2u1t8ffj/