为什么这个蓝色矩形在 Opera 和 Chrome 中的对齐方式不同？答案

【问题标题】：Why does this blue rectangle align differently in Opera and Chrome?为什么这个蓝色矩形在 Opera 和 Chrome 中的对齐方式不同？
【发布时间】：2014-08-23 04:20:21
【问题描述】：

<div style="float:left; width:465px;">xxx</div>
<div style="width:320px; border:1px solid #099aef; position:absolute; display:inline;">Different position of this rectangle in Opera vs Google Chrome</div>

Opera 显示左侧的蓝色矩形，Chrome 显示不同。为什么？附言代码被大大简化以发现错误，现在可能没有意义了。

【问题讨论】：

您能否更具体地了解 Chrome 与 Firefox 显示页面的方式有何不同？
小提琴：jsfiddle.net/VAdNA
Chrome 将其显示在右侧：右侧 465 像素。
Firefox 没有为我显示在左侧。
@Tyilo：最好取消标准化。 (jsfiddle.net/VAdNA/1) 另外，我发现最新的 FF 和 Chrome 之间存在明显差异。

标签： html google-chrome opera

【解决方案1】：

在没有位置坐标的情况下，Chrome 似乎忽略了您在第二个 div 上的绝对定位。相反，它会在第一个 div 的右侧显示第二个 div，就好像它在正常的页面流中一样。

【讨论】：

Chrome 没有忽略。你的意思是 Opera 忽略了，对吧？ Chrome 不忽略，IE6（IE8+ 未测试）和 FF 不忽略。
没有 Chrome 忽略。如果 Opera 将其显示在左侧，那是正确的。由于您没有指定顶部/左侧位置，因此该位置默认为顶部：0，左侧：0。