Internet Explorer 8 ошибка с отображением: таблица - PullRequest
5 голосов
/ 22 сентября 2010

У меня самая странная ошибка в истории ... Я экспериментирую с display: table, и мое доказательство концепции работает с первой попытки после открытия нового процесса, но любая последующая перезагрузка страницы нарушает дизайн. Вот простая HTML-страница:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        .container {
            display: table;
        }

        .row {
            display: table-row;
        }

        .cell {
            display: table-cell;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            padding: 1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="cell">CELL A</div>
            <div class="cell">CELL B</div>
            <div class="cell">CELL C</div>
        </div>
    </div>
</body>
</html>

А вот ожидаемый результат, это то, что я получаю после первой загрузки.

alt text

Теперь вот что я получаю после перезагрузки страницы с F5:

alt text

Это безумие !!!

Может кто-нибудь, пожалуйста, попробуйте и дайте мне знать, как это получается для них? Спасибо. Надеюсь, я не покончу с собой, когда прочитаю решение: -)

Ответы [ 2 ]

18 голосов
/ 22 сентября 2010

Оказывается, что, как полагают некоторые, режим совместимости IE был как-то запущен.

Я обнаружил, что это потому, что я запускаю страницу в интрасети, и по умолчанию режим совместимости включен для веб-сайтов интрасети.

Это можно отключить, перейдя в Инструменты> Параметры просмотра совместимости и сняв флажок Отображать сайты интрасети в представлении совместимости. Конечно, это не то, что вы обязательно хотите попросить всех своих пользователей сделать, поэтому было предложено добавить

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

в шапке, которая прекрасно работает.

Подробнее об этом: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

6 голосов
/ 22 сентября 2010

Проблема, когда браузер находится в представлении совместимости.(согласно предложению taylorjes)

Когда страница отображается в обычном режиме, ячейки расположены горизонтально.При отображении в режиме совместимости ячейки являются вертикальными.

Как я уже сказал в своем комментарии, я бы настоятельно не рекомендовал CSS-свойство display: (table / table-row / table-cell).Это не очень хорошо поддерживается и обязательно имеет причуды.

Если честно, если вы отображаете табличные данные, , тогда используйте таблицу .Таблицы являются злыми только при использовании для макета .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...