Question

下面链接上的代码，在jsfiddle上正常工作，但不幸的是浮动：左边不能处理chrome / firefox。这方面的任何指示都会有所帮助。

<div class='list' id='list1' style='padding: 1px; border : 5px groove; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
    <div class='tuple tuple1' id='tuple1_1' style='padding: 2px; border : 1px solid; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
        <div class='elmnt elmnt1 elmnt1_1' id='elmnt1_1' style='padding: 2px; border : 1px dotted; position: relative; left: 6px;  min-width: 3px; width: 100; min-height: 3px; height: auto;' >
            <div class='list' id='list2' style='padding: 1px; border : 5px groove; min-width: 3px; width: auto; min-height: 3px; height: auto; ' >
                <div class='tuple tuple2' id='tuple2_1' style='padding: 2px; border : 1px solid; min-width: 3px; width: auto; min-height: 3px; height: auto; overflow: hidden;' >
                    <div class='elmnt elmnt2 elmnt2_1' id='elmnt2_1' style='padding: 2px; border : 1px dotted; min-width: 3px; width: auto; min-height: 3px; height: auto; float : left;' >jdk-7u11-linux-i586.rpm</div>
                    <div class='elmnt elmnt2 elmnt2_2' id='elmnt2_2' style='padding: 2px; border : 1px dotted; min-width: 3px; width: auto; min-height: 3px; height: auto; float : left;' >107M </div>                  
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

行为上的差异是由于您是否有DOCTYPE。如果您创建一个顶部有DOCTYPE的完整html文件，如下所示：

<!DOCTYPE html>

然后它应该按预期工作。

引用HTML5 specification：

由于遗留原因，需要DOCTYPE。省略时，浏览器倾向于使用与某些规范不兼容的其他渲染模式。在文档中包含DOCTYPE可确保浏览器尽最大努力遵循相关规范。

浮动离开不在浏览器中工作

1 个答案: