19

这是一个常见问题，但我无法弄清楚为什么会发生这种情况。

我有一个父 div，在那个 div 里面我有 3 个宽度设置为 33% 的 div（确切地说，不是 33.3%！）和display: inline-block.

在 Chrome 中它运行良好，但在 Mozilla 和 Opera 中却不行（我还没有在 IE 中测试它）。我认为问题可能出在浏览器用来从百分比计算像素大小的算法中。但是当我检查 DOM 指标时，我发现父母的宽度是 864 像素，孩子的宽度是 285 像素（这是正确的：864 * .33 = 285.12）。但是为什么它不适合父母呢？285 * 3 = 855，比父母的宽度小 9px！

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

4

7 回答 7

40

HTML 源代码中的空格

在 HTML 源代码中，当您有文本或图像行或元素时inline-block，如果它们之间有任何空格（空格、制表符或新行），则当页面被渲染。例如，在下面的 HTML 中，四个内容之间会出现一个空格：

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

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

删除多余的空间

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

例如，如果您有ul3 个浮动li标签：

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

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

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

考虑浮动元素

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

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

其他解决方案的快速总结

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

如果您不想弄乱 HTML 格式，例如inline-block为了将来的可读性将所有元素写在一行中，并且还不想在它们之间添加额外的空白，您可以“评论”空白。

例如，在您的代码中，这将解决问题，它甚至可以使用 33.3% 而不是 33%：

.parent {
    width: 100%;
 }
.child{
    display: inline-block;
    width: 33.3%;
}

/\

<div class="parent">
       <div class="child">bla-bla1</div><!-- 
    --><div class="child">bla-bla2</div><!-- 
    --><div class="child">bla-bla3</div>
</div>
于 2013-03-27T07:57:56.017 回答
4

添加float:left;

.parent{
    width: 100%
}
.child{
    float:left;
    display: inline-block;
    width: 33%

}

http://jsfiddle.net/H6Whc/1/

于 2013-03-27T07:11:28.130 回答
4

内部 div 之间添加了一个空格。有一些 CSS voodoo 可以纠正这个问题：

div {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}
div div {
    letter-spacing: normal;
    word-spacing: normal;
}

当然，您可能更喜欢使用类或其他东西来区分父母和孩子。

于 2013-03-27T06:54:25.480 回答
2

有没有人尝试过显示：表？如果这不是一个好主意，为什么不呢？这适用于所有现代浏览器，我将其测试到 IE9。

.parent{  
    display: table;
    width: 100%;
}
.containers {
    box-sizing: border-box;
    border: 1px solid #000;
    height: 50px;
    width: 33.3%;
    display: table-cell;
}
于 2014-10-23T19:37:45.030 回答
1

许多评论和@Avin 都提到了这一点，但将其删除display: inline-block并替换为float: left作品。

.parent{
    width: 100%
}
.child{
    float:left;
    width: 33%
}
于 2014-02-04T07:14:21.813 回答
-1

display: table这是一个常见的问题，但是通过将CSS 属性分配给父 div可以很容易地解决它。

于 2017-03-27T11:41:21.810 回答