Css 铬虫？新行包装下一个元素

我认为理论上不应该呈现html中的原始新行，也不应该影响布局，但我认为Chrome似乎确实如此：

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

这是已知的WebKit错误吗

HTML:

内联块

元素如果html中有空格，则在元素之间添加空格

当元素设置为

display:inline block

时，这将导致出现空白

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

---

我在Firefox中看到了这一点，如果将

float:right

关闭

.right

，则第一组元素中有空格。因此，Firefox似乎需要在多个元素上设置

display:inline block

来创建额外的空白

你的代码出错的几率>Chrome出现错误的几率我对此毫无疑问，但是Firefox可以工作，所以我必须在这里选择一个英雄。由于HTML中的“我的空间”，请查看该空间。改为在两个div上使用float，它是固定的：）谢谢@brouxhaha的链接。我猜Firefox开始忽略内联块之间的间距。请在答案中添加更多上下文

.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;
}

<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>

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