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

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

任何想法问题的地方？

编辑：
margin，border，padding均为0

此外，任何表属性被删除：

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

来源

2012-11-02 Francisc

任何小提琴？你是否使用reset.css或其他任何类型来重置所有元素。如果不是，我建议使用一个。 – srijan

你的意思是1px的填充或边距？如上所示，我建议尝试一个reset.css文件。 –

事情是，它既不。填充为0，边距为0，边框为0.然后border-spacing：0; border-collapse：collapse; table-layout：fixed ;. – Francisc

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

来源

2013-02-18 19:42:35 noun

这非常微妙，谢谢你，Pinco。 – Francisc

我会重置在所有浏览器的余量和填充。

*{margin:0; padding:0;}

请注意，您也可以下载一个重置css文件，如果你还想。

normalize.css或reset.css

来源

2012-11-02 15:17:41 BuiltInOneDay

我编辑了我的答案。这不是利润或填充。这是一个浏览器的怪癖我会说。 – Francisc

我也想看看空格作为一个可能的罪犯和测试与font-size: 0。

来源

2012-11-02 15:54:37 Henrik

这是个好主意。我会在下周给你一个镜头。谢谢。 – Francisc

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

他们建议增加table-layout: fixed到已经应用display: table的元素。

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

来源

2015-06-08 21:16:57

我已经注意到这个问题，早在2015年 - 它只是影响谷歌Chrome和修复它是将您的显示器的唯一途径：表到子容器，所以如果你有：

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

它看起来像谷歌浏览器存在与宽度与显示冲突：当它应用到相同的变量表。

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

长话短说，我修复工作在铬:)

https://jsfiddle.net/2u1t8ffj/

来源

2017-06-22 09:08:04 Mike

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

回答

相关问题