IE 11中父母与子女之间的鬼差/填充

Question

当我有marton@linux-clwa:~/documents/github/fmi-fall-2016/dm/graphs/cpp> make g++ -c main.cpp g++ -c graph.cpp g++ main.o graph.o -o output marton@linux-clwa:~/documents/github/fmi-fall-2016/dm/graphs/cpp> ./output ahdhasd ---------------------------- 53|0|0|0|0|| 0|0|0|0|0|| 0|0|0|0|0|| 0|0|0|0|0|| 0|0|0|0|0|| 父元素和子元素时，IE显示它们之间的空格：

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

inline-block

.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;
}

Answer 1

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

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

  

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

     

如果您确定不需要包含inline-block的内容，那么可以设置CSS属性   .white-space至nowrap ：

div.bar