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

问题描述

<!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的标记吗？

解决方法

Chrome和Firefox是正确的，尽管这很主观。您可以尝试在<ol>周围放一个<div>并使其漂浮在左边:)，也可以尝试使用inline-block。

div 列表列表浏览器浏览器浮动问题问题