ie7推下花车

Question

我有一个ie7问题。在Firefox和IE8中，一切似乎都运行良好。

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

图像描绘了这一点。

这是代码。

.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导致其他问题，请告诉我们，我们可以找到解决方法。

Answer 2

我要说的唯一合乎逻辑的结论是clear:both导致问题 - 因为它是第一项没有的唯一风格。

同一元素上的

float + clear会导致IE7中出现异常异常。

http://www.brunildo.org/test/IEWfc3.html