IE8兼容模式下的CSS Quirk [英] CSS Quirk in IE8 Compatibility Mode

问题描述

我正尝试在IE8兼容模式下在表单元格中显示名称/值对(如下所示)(带有轮廓-DIV为红色，SPAN为绿色，TD为橙色).

I am trying to show name-value pairs in a table cell as shown below in IE8 compatibility mode (with outlines - DIVs are red, SPANs are green, TDs are orange).

_{(来源: heeroz.com )}

标记和CSS:

<td width="40%">
    <div class="info_row">
        <asp:Label ID="lblWSPONumber" runat="server" Text="WS PO Number"
               CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbWSPONumber" runat="server"/>
    </div>
    <div class="info_row">
        <asp:Label ID="lblCustomerPONumber" runat="server" 
            Text="Customer PO Number" CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbCustomerPONumber" runat="server" />
    </div>
    <div class="info_row">
        <asp:Label ID="lblBulkOrderDate" runat="server" Text="WS PO Date"
            CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbBulkOrderDate" runat="server" />
    </div>
    <div class="info_row">
        <asp:Label ID="lblSHOrderDate" runat="server" Text="SH PO Date"
            CssClass="edit_control_label"></asp:Label>
        <asp:Label ID="tbSHOrderDate" runat="server" />
    </div>
</td>

.info_row
{
    margin: 0px 0px 0px 0px !important;
    float: left;
    clear: left;
}
.edit_control_label
{
    width: 150px;
    float: left;
    display: inline-block;   
    margin-right:15px; 
    margin-top:3px;
}

这工作正常，并且在IE8和FF中符合预期.似乎在IE7中，第一个DIV之后的所有DIV都不是150px宽，而是仅扩展到第一个DIV中第二个SPAN的开头.然后，将块中的第二个元素包装在蓝色文本下方.是什么原因造成的?

This works fine and as expected in IE8 and FF. It seems that in IE7 all DIVs after the first one are not 150px wide, but only extend to the beginning of the 2nd SPAN in the first DIV. The 2nd element in the block is then wrapped underneath the blue text. What is causing this?

推荐答案

尝试为第二个< asp:Label> 添加另一个CSS类，并在其上设置宽度以及设置宽度 .info_row < div> 的大小，以容纳总边距和asp:Labels(span标签)大小.

Try adding another CSS class for the second <asp:Label> and setting a width on that as well as setting the width of the .info_row <div> to accommodate the total margin and both asp:Labels(span tags) sizes.

这篇关于IE8兼容模式下的CSS Quirk的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！