IE CSS对齐问题

我的问题是我有两个我需要对齐的下拉框。在Firefox中，它工作正常。基本上，一个国家的形式框，然后在它下面，另一个国家形式框。在IE中，这些框显示为彼此相邻。我试图对其进行设计，以便第一个表单下方出现第二个表单框。IE CSS对齐问题

我的HTML代码（我砍掉了一些状态，以便它会更容易阅读）：

<div class="label">*Country:</div> 
<div class="field"> 
    <asp:DropDownList ID="country" CssClass="country2" runat="server"></asp:DropDownList>  
</div> 
<div class="label"></div> 
<div class="field"> 
    <asp:DropDownList ID="us_states" runat="server" CssClass="us_state_dropdown2"> 
    <asp:ListItem>-Select State-</asp:ListItem> 
    <asp:ListItem>Alabama</asp:ListItem> 
    <asp:ListItem>Alaska</asp:ListItem> 
    <asp:ListItem>Arizona</asp:ListItem> 
    </asp:DropDownList> 
</div>

为类“标签”，“场”，“COUNTRY2”和“us_state_dropdown2我的CSS代码“：

.label {width: 195px !important; height: 28px; } 
.field {width: auto !important;} 
.country2 { width:212px !important;} 
.us_state_dropdown2 { width:212px !important;}

任何想法？

来源

2011-10-17 ndisdabest

是否有任何规则适用于'div'在该上下文中，如'float'？ – jball

完整的CSS（我省略了我认为不相关的东西）： #contact_form .label {width：195px！important;身高：28px; } #contact_form .field {width：auto！important;} .question {float：left; width：100％;} .question .label {height：auto！important;} .question .field {margin-top：0px！important; } .country2 {width：212px！important;} .us_state_dropdown2 {width：212px！important;} – ndisdabest

您可以使用clear来避免元素位于您选择的边上。阅读CSS参考资料，了解如何使用clear。 MDN Reference

来源

2011-10-17 18:32:13

即使我把“明确：既！重要”;对此，我仍然看到相同的行为。这是我尝试的第一件事情之一。 – ndisdabest

@ndisdabest，你能提供页面的相关来源吗？没有ASP服务器的人可以更容易地测试答案。你可以粘贴到http://www.jsfiddle.net。 –

没关系，我能弄明白。只是将它包装在另一个DIV中，它似乎工作正常。 – ndisdabest

IE CSS对齐问题

回答

相关问题