如何停止在浏览器中呈现内联块空白

Question

粗略地说，尝试构建一个四列布局，我得到了这个 HTML：

<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

我有这个 CSS：

div {
    background: #ccc;
}

div div {
    background: #eee;
    display: inline-block;
    width: 25%;
}

->Fiddle me this

在浏览器中渲染时（目前，我只使用 Chrome 进行测试）嵌套的 div 元素之间的空白（在本例中是由换行符引起的）被渲染，因此我的布局被丢弃了。

显然，我可以浮动我的嵌套 div...

div {
    background: #ccc;
}

div div {
    background: #eee;
    width: 25%;
    float: left;
}

->Fiddle me that

但是我的容器 div 崩溃了，我不想必须使用 CSS clearfix hacks 或额外的 HTML 来打开它。

或者，我可以修改我的 HTML，以便删除空格...

<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>

但这使得它很难使用。打破标签以使其更具可读性的替代方法让我感觉很脏......

<div>
    <div>A column</
    div><div>A column</
    div><div>A column</
    div><div>A column</div>
</div>

我找到了 resource 或 two（我在 SO 上找不到任何东西），但我不太喜欢任何解决方案 - 它们都是解决方法，如果我必须但肯定会接受有其他选择吗？

所以我的问题... 是否有一种跨浏览器、符合 w3c、非 JavaScript、无黑客攻击、整洁的 HTML、防弹的方式来防止在使用 @987654332 时在浏览器中呈现 HTML 空白@?或者有没有可以使用且没有令人不快的副作用的 inline-block 替代方案？

编辑

假设这真的是不可能的，最好的解决方案是不需要额外的 HTML 标记和“灵活”的 CSS。换句话说，网站管理员可以正常编辑 HTML 而无需考虑破坏布局，而 CSS（被黑或其他）将适应网站管理员的修改，而无需自行修改。

我的“解决方法”

嗯，看来必须付出一些代价。在我的情况下，拥有不需要额外标记的 HTML 更为重要，因此最好的解决方案是在“只是工作”无形的 CSS hack 中工作。解决方案是浮动嵌套的 div 并添加一个 hack...

div div {
    float: left;
}

div::before,
div::after {
    content: "";
    display: table;
}

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

...这是我已经使用了一段时间并希望避免的修复的派生。发现此修复的简洁版本on this site。

所以现在标记中的每个 div 都已经应用了 clearfix hack，无论它是否需要它。我还没有通过应用于 all div 来了解这是否有任何不良副作用 - 我期待在出现任何问题时进行调试和修复 ;-)

Answer 1

您可以使用您在问题中描述的浮动方法，但您没有清除浮动，这就是容器崩溃的原因。

一个好的方法是使用::after 伪元素附加到容器元素来“自动清除”自身：

 div:after {
    content: "";
    display: table;
    clear: both;
}

http://jsfiddle.net/s2rJW/3/

Answer 2

有没有办法在使用 display:inline-block 时防止 HTML 空白在浏览器中呈现？

是的，有几种方法。它们都没有真正符合您“无黑客”和“整洁”的标准，但它们确实有效。

• 重新格式化（“缩小”）您的代码，使其元素之间没有任何空白。
  这可能是最无黑客和跨浏览器的解决方案。虽然它不一定很整洁，这意味着您通过调整 HTML 而不是 CSS 来修复布局，这并不理想。但它确实运作良好。如果你想让你的代码保持可读性，你可以使用 HTML cmets 这样你就可以保持差距，但它们不会在 DOM 中：

     <div>block 1</div><!--
  --><div>block 2</div><!--
  --><div>block 3</div>
  

  仍然不理想，但比大量的单行代码更具可读性。

• 将容器的 font-size 设置为零，然后将块再次恢复为全尺寸。
  这真的很好。这是一个纯 CSS 解决方案，而且很容易做到。不利的一面是，如果您有相对的字体大小（即设置回14px 很好，但设置为1em 将不起作用，因为1em 是以前的字体大小零仍然是零）。

• 设置1em 负边距以缩小差距。
  这也很有效，但可能不够精确。

或者有没有可以使用且没有令人不快的副作用的 inline-block 替代品？

• 总是有float:left。但这本身就有一系列不同的问题。如果你使用inline-block，那是因为你不想使用浮点数。

• 使用position:absolute 并手动进行布局。

Answer 3

您为这个大的布局问题提供了几乎所有可能的解决方案。我只想指出我的首选解决方案。

将 parent 的 font-size 设置为 0 并使用 REM 再次重置它。

如果父 div（不是子 div）内没有其他文本，您的代码和布局不会有任何问题。

REM（相对 EM）与父元素的字体大小无关（与普通 EM 一样），而是与文档的根元素（html 元素）相关。

HTML：

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

CSS：

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

不支持浏览器：

• IE8 及以下：添加基于像素的字体大小以使其工作。
• IE9/10：不能使用font-shorthand；请改用font-size！
• （Opera Mini 和 iOS 3.2）

Answer 4

当我看到你的“解决方法”时，我在想：你为什么不使用<table>？

然后我想通了：

div {
  background: #ccc;
  display: table;
  width: 100%;
}
div div {
  background: #eee;
  display: table-cell;
  width: 25%
}

<div>
  <div>A column</div>
  <div>A column</div>
  <div>A column</div>
  <div>A column</div>
</div>