display:table在Chrome/Firefox中行内元素空格差异及跨浏览器方案咨询

示例代码 #

CSS #

div {
  display: table;
  margin: 1em auto;
  background: lightBlue;
}

HTML #

<div id="container">
  <label for="input">label</label>
  <input type="text" id="input">
  <span>span</span>
  <ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ol>
</div>

你通过上述代码实现div居中时，Chrome会收缩容器并折叠行内元素间的连续空白，但Firefox不会移除label、input和span之间的空白，以下是针对问题的解答：

哪种表现符合标准规范？ #

Firefox的表现更符合CSS规范。根据规范，行内元素（如label、input、span）之间的空白字符（换行、空格等）会被合并为一个空格，这个空格属于容器内容的一部分，容器宽度应当包含该空格的宽度。Chrome在这里做了额外的优化处理，直接移除了这些空白，导致容器宽度被过度收缩，这其实偏离了规范要求。

跨浏览器兼容的解决方案是什么？ #

可以通过以下几种方法消除跨浏览器的空白差异：

• 移除HTML中行内元素间的空白：将label、input、span写在同一行，或者用注释填充换行位置（如<label>...</label><!-- --><input>...），从根源上消除空白字符
• 容器设置font-size: 0，再给内部行内元素单独设置合适的font-size：空白字符的尺寸会被归零，不会占据宽度
• 改用Flex布局：给容器设置display: flex; flex-wrap: wrap;，Flex布局默认会忽略元素间的空白，同时也能轻松实现居中
• 给行内元素设置负margin：比如margin-left: -0.25em（具体值可根据字体调整），抵消空白占据的宽度

使容器居中的正确方法是什么？ #

根据不同布局场景，推荐以下几种可靠的居中方法：

• 对于宽度由内容决定的容器（如你的display:table场景），直接使用margin: 1em auto即可实现水平居中，这是最简单直接的方法
• Flex布局：给容器的父元素设置display: flex; justify-content: center;，这种方法灵活性高，还能同时实现垂直居中
• Grid布局：给父元素设置display: grid; place-items: center;，代码更简洁，适合现代浏览器环境
• 绝对定位：如果需要脱离文档流的居中，可给容器设置position: absolute; left: 50%; transform: translateX(-50%);，记得给父元素设置position: relative;

内容的提问来源于stack exchange，提问作者Mori