html - ie7 下推 float

Question

我有一个 ie7 问题。在 Firefox 和 IE8 中似乎一切正常。

在 ie7 中，第一个元素工作正常，但所有其他元素都被下推，就像它们应用了 clear 一样。

图片最能说明这一点。

这是代码。

.newLabellg 
{
    float:left; 
    width:66px; 
    margin:3px 0 0 0;
    font-weight:bold;
    color:#000;
}


<div style="float:left; width:320px;">

    <div style="margin-bottom:10px; float:left;">
        <div class="newLabellg">Cusotmer#:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerNumber" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Cusotmer:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerName" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg" style="float:left;">Address:</div>
        <div style="float:left;">
        <asp:TextBox ID="Address" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Mailing Address:</div>
        <asp:TextBox ID="Address2" runat="server" Width="220px"></asp:TextBox>
        <div style="float:left; margin:3px 0 0 0">
        <asp:DropDownList ID="City" runat="server" Width="109px">
        </asp:DropDownList>
       <asp:DropDownList ID="Province" runat="server" Width="109px">
        </asp:DropDownList></div>

    </div>
</div>

知道 ie7 为什么/做什么以及如何修复它吗？

Answer 1

简单地从以下的每个实例中删除 clear: both:

<div style="margin-bottom:10px; float:left; clear:both;">

让它在我测试过的浏览器中看起来正确:IE7/8 + Firefox。

如果删除 clear: both 会导致不同的问题，请告诉我们，我们可以找到解决方法。