我有一个父div，里面的div我有3个div，宽度设置为33％(完全不是33.3％！)并显示：inline-block。
在Chrome中，它的效果很好，但是在Mozilla和Opera中它并没有(我还没有在IE中测试)。我认为问题可能在算法浏览器中用来计算像素大小的百分比。但是当我检查DOM指标时，我发现父项的宽度是864px，孩子的是285px(这是正确的：864 * .33 = 285.12)。但为什么不适合父母呢？ 285 * 3 = 855，比父母的宽度小9px！
哦，是的，填充，边距和边框的所有div设置为0和DOM指标确认。
解决方法
在HTML源代码中，当您有文本或图像行或内嵌块的元素时，如果它们之间有空格(空格，制表符或新行)，则会在单个空格字符之间添加一个空白字符他们在页面呈现时。例如，在以下HTML中，四个内容之间将出现一个空格：
one two <img src="three.png"/> <span style="display: inline-block;">four<span>
这对于文本行以及出现在文本行内的小图像或HTML元素非常有帮助。但是，当将内联块用于布局目的而不是在文本段落内添加内容时，会成为问题。
删除额外的空间
避免在内嵌块元素之间添加的额外4px左右的空间的最安全的跨浏览器方式是删除HTML标签之间的HTML源代码中的任何空格。
例如，如果你有一个ul与3个浮动li标签：
<-- No space,tabs,or line breaks between </li> and <li> -->
<ul>
<li>...</li><li>...</li><li>...</li>
</ul>
不幸的是，这损害了网站的可维护性。除了使代码不可读，它严重损害了数据和格式的分离。
如果另一个程序员以后出现，并决定将每个li标签放在源代码中的单独行上(不知道标签为何在同一行上，或者可能通过HTML Tidy运行，甚至没有机会注意到任何相关的HTML评论)，突然网站有一个可能难以识别的格式错误。
考虑浮动元素
空白行为强烈地表明，使用内联块进行一般布局的目的可能不合适，可以将其用于除文本段落内的内容之外的任何内容。
此外，在某些情况下，内嵌块内容非常难以完全风格和对齐，尤其是在旧版浏览器上。
>将关闭标签放在与下一个打开的标签相同的行上，它们之间没有空格。
>使用HTML注释来填充关闭标签和下一个打开标签之间的所有空格(如@Arbel建议的)。
>向每个元素添加一个负的左边距(通常为-3px或-4px，基于font-size)。我不推荐这个特别的方法。
>将容器元素的font-size设置为0或0.01em。这在Safari 5中不起作用(不确定后续版本)，并且可能会干扰响应设计网站，或任何使用除px以外的字体大小单位的网站。
>使用JavaScript或jQuery从容器中删除仅空白的文本节点。这在IE8和更早版本中不起作用，因为当元素之间只有空格时，文本节点不会在这些浏览器中创建，尽管元素之间仍然添加了空格。
>为容器设置字母间距和字间距(建议为@PhillipWills)。 Further info.这需要在网站上标准化em大小，这可能不是所有网站的合理选择。
>添加文本空间崩溃：丢弃;到容器(以前称为空白 – 空间崩溃)。不幸的是，任何浏览器都不支持this CSS3 style，而且还没有完全定义标准。
