HTML5 跨浏览器问题；浮动 div 和列表答案

【问题标题】：HTML5 cross-browser issue; floating div and listHTML5 跨浏览器问题；浮动 div 和列表
【发布时间】：2011-09-02 23:07:11
【问题描述】：

<!DOCTYPE html>
<html>
<body>
<div style="width:300px; height:300px; 
    background-color: Green; float:left; margin-right:3em;"></div>
<ol>
    <li>First</li>
    <li>Second</li>
</ol>
</body>
</html>

在 Chrome 12 和 Firefox 4 中，这会在绿色方块的右侧呈现一个列表。在 IE9 中，十进制数字位于左侧，与绿色方块重叠，而 ol 的内容位于绿色方块的右侧。

截图如下：http://i.stack.imgur.com/EO8Se.png

具有兼容模式的 IE9 呈现与 Chrome 和 FF 相同的效果。

哪个浏览器是“正确的”？
您能否建议在所有浏览器中呈现类似 Chrome 和 FF 的标记？

【问题讨论】：

我发现<ol style="display: inline-block;">“修复了故障”。但我很惊讶它是必需的，如果有人能解释原因，我仍然希望能进行一些讨论。

标签： internet-explorer html cross-browser internet-explorer-9

【解决方案1】：

Chrome 和 firefox 是正确的，尽管这是非常主观的。

您可以尝试在您的<ol> 周围放置一个<div> 并将其浮动:)，或者尝试使用inline-block。

【讨论】：

为什么它们是正确的？因为除非另有说明，否则数字应在文本前面。此外，向左浮动的 div 不应以任何方式干扰
元素的定位。

我认为 HTML5 应该让跨浏览器变得容易？ :)

是的，W3C 有严格的规定，但浏览器供应商总是“按照自己的方式”行事。还可能发生的情况是，某些事情尚不清楚，由他们来植入，或者最终确实会发生错误，但它们不应该出现在 html 中。