3 inline-block divs与33％的宽度不适合在父级 [英] 3 inline-block divs with exactly 33% width not fitting in parent

问题描述

这是一个常见的问题，但我不知道为什么会发生。

我有一个父div和里面div我有3 divs宽度设置

在Chrome中它的工作原理是：33％（确切地说，不是33.3％！）和 display：inline-block 好吧，但在Mozilla和Opera它不（我没有在IE中测试它）。我认为问题可能在算法浏览器用于计算像素大小从百分比。但是当我检查DOM指标，我发现父的宽度是864px和孩子的285px（这是正确的：864 * .33 = 285.12）。但为什么不适合父母呢？ 285 * 3 = 855，比父级宽度小9px！

哦，是的，所有div的填充，边距和边框设置为0，DOM指标确认。 / p>

解决方案

HTML源代码中的空格

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

  one 
 two 
< img src =three.png/> 
< span style =display：inline-block;>四< span> 
  

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

删除额外的空间

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

如果您有一个 ul ，带有3个浮动的 li 标签：

 <  - 在< / li>之间没有空格，制表符或换行符。和< li> - > 
< ul> 
< li> ...< / li>< li> ...< / li>< li> ...< / li> 
< / ul>不幸的是，这损害了网站的可维护性。
  

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

考虑浮动元素 b
$ b

空白行为强烈暗示，对于一般布局目的使用 inline-block 可能是不合适的，用于任何其他

此外，在某些情况下， inline-block 非常难以完全风格和对齐，尤其是在旧版的浏览器。

其他解决方案的快速摘要

2. 使用HTML注释填充关闭标记和下一个打开标记之间的所有空格（例如，


3. 为每个元素添加一个负左边距（通常为-3px或-4px，基于字体大小）。我不推荐这种特殊方法。


4. 将容器元素的 font-size 设置为0或0.01em。这在Safari 5（不确定是否有更新版本）中无效，并且可能会干扰响应式设计网站或任何使用 font-size 单元 px 。


5. 使用JavaScript或jQuery从容器中删除仅包含空格的文本节点。这在IE8和更早版本中不起作用，因为当在元素之间只有空格时，不会在这些浏览器中创建文本节点，但仍然在元素之间添加空格。


6. 设置字符间距和字间距（如@PhillipWills建议）。 详细信息。这需要在网站上标准化 em 尺寸，这可能不是所有网站的合理选择。


7. 添加 text-space-collapse：discard; 到容器（以前称为 white-space-collapse ）。很抱歉，任何人都不支持此CSS3样式浏览器，并且该标准尚未完全定义。

This is a common problem but I can't figure out why it happens.

I have a parent div and inside that div I have 3 divs with width set to 33% (exactly, not 33.3%!) and display: inline-block.

In Chrome it works well, but in Mozilla and Opera it does not (I didn't test it in IE yet). I thought the problem might be in the algorithm browsers use to calculate pixel sizing from percentages. But when I checked the DOM metrics, I found that the parent's width is 864px and the child's is 285px (that's correct: 864 * .33 = 285.12). But why doesn't it fit in the parent? 285 * 3 = 855, that's 9px less than parent's width!

Oh, yes, padding, margin and border for all divs set to 0 and DOM metrics confirm that.

解决方案

Whitespace in the HTML source code

In the HTML source code, When you have lines of text or images, or elements that are inline-block, if there is any whitespace between them (blank spaces, tabs, or new lines), a single blank space character will be added between them when the page is rendered. For example, in the following HTML, a blank space will appear between each of the four pieces of content:

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

This is very helpful for lines of text, and for small images or HTML elements that appear inside a line of text. But it becomes a problem when inline-block is used for layout purposes, rather than as way to add content inside a paragraph of text.

Removing the extra space

The safest, cross-browser way to avoid the extra 4px or so of space that's added between inline-block elements, is to remove any whitespace in the HTML source code between the HTML tags.

For instance, if you have a ul with 3 floated li tags:

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

Unfortunately, this hurts the maintainability of the website. Besides making the code unreadable, it severely compromises the separation of data and formatting.

If another programmer comes along later and decides to put each li tag on a separate line in the source code (unaware of why the tags were on the same line, or possibly running it through HTML Tidy and not even having a chance to notice any related HTML comments), suddenly the website has a formatting bug that may be difficult to identify.

Consider floating elements instead

The whitespace behavior strongly suggests that it may be inappropriate to use inline-block for general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.

Plus, in some cases inline-block content is very difficult to fully style and align, especially on older browsers.

Quick summary of other solutions

1. Put the close tag on the same line as the next open tag, with no white space between them.
2. Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as @Arbel suggested).
3. Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
4. Set the font-size for the container element to 0 or 0.01em. This doesn't work in Safari 5 (not sure about later versions), and it may interfere with Responsive Design websites, or any website that uses a font-size unit other than px.
5. Remove whitespace-only text nodes from the container using JavaScript or jQuery. This doesn't work in IE8 and earlier, as text nodes are not created in those browsers when there's only whitespace between elements, though space is still added between the elements.
6. Set letter-spacing and word-spacing for the container (as @PhillipWills suggested). Further info. This requires standardizing em sizes on the website, which may not be a reasonable option for all websites.
7. Add text-space-collapse: discard; to the container (previously called white-space-collapse). Unfortunately, this CSS3 style is not yet supported by any browsers, and the standard hasn't been fully defined.

这篇关于3 inline-block divs与33％的宽度不适合在父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！