IE8兼容模式下的CSS Quirk

Question

我试图在表格单元格中显示名称 - 值对，如下面IE8兼容模式所示（带有轮廓 - DIV为红色，SPAN为绿色，TD为橙色）。

_{（来源：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的开头。然后将块中的第二个元素包裹在蓝色文本下面。是什么造成的？

Answer 1

尝试为第二个<asp:Label>添加另一个CSS类并在其上设置宽度，并设置.info_row <div>的宽度以适应总边距以及两个asp：标签（span标签）尺寸。

Answer 2

主要问题是你需要声明元素的宽度，否则IE会哭泣血腥谋杀。 如果您只想将宽度应用于IE 7并在声明前面放置“＃”，请执行以下操作：

#width: 150px;

另外，如果在除8之外的任何IE版本中正确对齐，我会感到惊讶。

您可以获得与浮动相同的效果：

text-align:left;
display:inline;

希望这有帮助， 大卫。

Answer 3

这是表格数据。有一个专门用于显示表格数据的整个标签集，它快速，简单，灵活和强大。不幸的是，由于除了显示表格数据之外的问题，这个标签集似乎已经失宠了。这是一种耻辱 - 表格确实是显示表格数据的最佳方式。