html - 3 个内联 block div，宽度刚好为 33%，不适合父级

Question

这是一个常见问题，但我不明白为什么会这样。

我有一个父 div，在那个 div 里面我有 3 个宽度设置为 33%(准确地说，不是 33.3%!)和 display: inline-block 的 div。

在 Chrome 中它运行良好，但在 Mozilla 和 Opera 中它不能(我还没有在 IE 中测试它)。我认为问题可能出在浏览器用于根据百分比计算像素大小的算法中。但是当我检查 DOM 指标时，我发现父项的宽度为 864px，子项的宽度为 285px(正确:864 * .33 = 285.12)。但为什么它不适合 parent 呢？ 285 * 3 = 855，比父级的宽度小 9px!

哦，是的，所有 div 的填充、边距和边框都设置为 0，DOM 指标证实了这一点。

Answer 1

HTML 源代码中的空格

在 HTML 源代码中，当您有文本行或图像行，或 inline-block 元素时，如果它们之间有任何空白(空格、制表符或换行符) , 呈现页面时将在它们之间添加一个空格字符。例如，在下面的 HTML 中，四段内容之间会出现一个空格:

one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>

这对于文本行以及出现在文本行内的小图像或 HTML 元素非常有用。但是当 inline-block 用于布局目的，而不是作为在一段文本中添加内容的方式时，它就成了一个问题。

删除多余的空间

要避免在 inline-block 元素之间添加额外的 4px 左右的空间，最安全的跨浏览器方法是删除 HTML 源代码中 HTML 标记之间的任何空白。

例如，如果您有一个带有 3 个 float li 标记的 ul:

<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
    <li>...</li><li>...</li><li>...</li>   
</ul>

不幸的是，这会损害网站的可维护性。除了使代码不可读之外，它还严重损害了数据和格式的分离。

如果另一个程序员稍后出现并决定将每个 li 标签放在源代码中的单独一行(不知道为什么标签在同一行，或者可能通过 HTML Tidy 运行它甚至没有机会注意到任何相关的 HTML 评论)，网站突然出现了一个可能难以识别的格式错误。

改为考虑 float 元素

空白行为强烈表明将 inline-block 用于一般布局目的可能不合适，将其用于除在一段文本流中添加内容之外的任何其他用途。

另外，在某些情况下，inline-block 内容很难完全样式化和对齐，尤其是在旧版浏览器上。

其他解决方案的快速总结

1. 将关闭标记与下一个打开标记放在同一行，它们之间没有空格。
2. 使用 HTML 注释填充关闭标记和下一个打开标记之间的所有空白(如@Arbel 所建议的那样)。
3. 为每个元素添加一个负的左边距(通常是 -3 像素或 -4 像素，具体取决于字体大小)。我不推荐这种特殊方法。
4. 将容器元素的 font-size 设置为 0 或 0.01em。这在 Safari 5 中不起作用(不确定更高版本)，它可能会干扰 响应式设计 网站，或任何使用 font-size 单位的网站 other比 px。
5. 使用 JavaScript 或 jQuery 从容器中删除纯空白文本节点。这在 IE8 和更早版本中不起作用，因为当元素之间只有空格时，不会在这些浏览器中创建文本节点，尽管元素之间仍会添加空格。
6. 为容器设置letter-spacing 和word-spacing(正如@PhillipWills 所建议的)。 Further info .这需要在网站上标准化 em 大小，这可能不是对所有网站都合理的选择。
7. 将 text-space-collapse: discard; 添加到容器(以前称为 white-space-collapse)。不幸的是，this CSS3 style尚无任何浏览器支持，标准尚未完全定义。