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，然后使用 demo 重置子项的字体大小：

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

我在Firefox中查看了这个内容，如果您将float: right关闭.right，则第一组元素中会有空格。因此，似乎Firefox需要在多个元素上设置display: inline-block来创建额外的空白。

Chrome bug？新行包装下一个元素

1 个答案: