IE 11 中父子之间的幽灵边距/填充

Question

当我有inline-block 父子元素时，IE 会在它们之间显示幽灵空间：

我可以通过删除 html 中的空格来解决此问题，但我想知道是否有针对此问题的 css 跨浏览器解决方案。

.bar {
  height: 30px;  
}

.section {
  display: inline-block;
  height: 100%;
  background: red;  
}

.section::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;  
  margin-left: -.25rem;
}

span {
  background: green;
  display: inline-block;
  vertical-align: middle;
}

<div class="bar">
  <div class="section">
    <span>
      IE ghost
    </span>
  </div>

  <div class="section">
    <span>
    No ghost
    </span><!-- 
--></div>
</div>

Answer 1

这是因为inline-block 的inline 行为。它们被视为其他内联元素，其中周围的兄弟元素（包括空格、文本等）将被解析而不是被忽略。

正如您所说，一种解决方案是删除受影响的 div 之间的空格，这可能会弄乱您的 html 格式（如果您关心的话）。

使用 CSS.white-space 的解决方案：

如果您确定不需要包含 div.bar 的内容来换行，那么 您可以设置的 CSS 属性 .white-space nowrap：

.bar { 
  height: 30px; 
  white-space: nowrap;
}