Chrome错误?新行包裹下一个元素

Question

我认为理论上html中的原始新行不应该被渲染，也不应该影响布局，但我的Chrome似乎确实做到了：http://jsfiddle.net/tzhong/4Nhb7/2/

该链接在Firefox和IE中运行良好（仅测试了10个），但在Chrome和Safari中则不然。

这是已知的WebKit错误吗？

HTML:

<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<p></p>
<div class="container">
<div class="left">Left</div><div class="right">Right</div>
</div>

CSS：

.left {
    display: inline-block;
    width: 50px;
    background-color: blue;
}
.right {
    display: block;
    float: right;
    background-color: red;
}

.container {
    margin-top: 120px;
    background-color: rgb(83, 86, 90);
    color: rgb(255, 255, 255);
    display: inline-block;
}

Answer 1

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如果html中有空格，inline-block元素会在元素之间添加空格。

当元素设置为display: inline-block时，这将导致出现空白。

<div class="left">Left</div>
<div class="right">Right</div>

您的第二组代码是一个修复方法-删除元素之间的空白：

<div class="left">Left</div><div class="right">Right</div>

这也可以用这样的评论来完成：

<div class="left">Left</div><!--
--><div class="right">Right</div>

或者，最好的解决方案可能是在父元素上使用font-size: 0，然后通过演示重置子元素的字体大小：

.container {font-size: 0;}
.left, .right {font-size: 16px;}

我在Firefox中看到了这一点，如果从.right中去掉float: right，那么第一组元素中就有空间。因此，Firefox似乎需要在多个元素上设置display: inline-block来创建额外的空白。