CSS Quirk в режиме совместимости IE8

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 после первого не имеют ширину 150px, а распространяются только на начало второго SPAN в первом DIV. Второй элемент в блоке затем оборачивается под синим текстом. Чем это вызвано?

Answer 1

Основная проблема заключается в том, что вам нужно объявить ширину элементов, иначе IE будет плакать кровавым убийством. Если вы хотите применить ширину только к IE 7 и ниже, поместите «#» перед вашим объявлением, например так:

#width: 150px;

Кроме того, я был бы удивлен, если бы это выравнивалось правильно в любой версии IE, кроме 8.

Вы можете получить тот же эффект, что и плавающий с:

text-align:left;
display:inline;

Надеюсь, это поможет, Дэвид.

Answer 2

Это табличные данные. Существует целый набор тегов, разработанный специально для отображения табличных данных, и он быстрый, простой, гибкий и мощный. К сожалению, этот набор тегов, по-видимому, потерял популярность из-за других проблем, кроме отображения табличных данных. Обидно - таблица действительно является лучшим способом отображения табличных данных.

Answer 3

Попробуйте добавить еще один класс CSS для второго <asp:Label> и задать для него ширину, а также установить ширину .info_row <div> для размещения общего поля и обоих размеров asp: Labels (span tags).