Переполнение IE8: авто с максимальной высотой

У меня есть элемент, который может содержать очень большие объемы данных, но я не хочу, чтобы он разрушал макет страницы, поэтому я устанавливал max-height: 100px и overflow:auto, надеясь, что полосы прокрутки появятся, когда содержимое не будет поместиться.

Все отлично работает в Firefox и IE7, но IE8 ведет себя так, как будто overflow:hidden присутствовал вместо overflow:auto.

Я пробовал overflow:scroll, по-прежнему не помогает, IE8 просто обрезает контент, не показывая полосы прокрутки. Изменение объявления max-height на height делает работу с переполнением ОК, это комбинация max-height и overflow:auto, которая ломает вещи.

Это также зарегистрировано как официальная ошибка в финальной версии IE8.

Есть ли обходной путь? На данный момент я прибегал к использованию height вместо max-height, но он оставляет много свободного пространства, если данных не так много.

ОТВЕТЫ

Ответ 1

Это очень неприятная ошибка, так как она сильно влияет на нас на Qaru с блоками кода <pre>, которые имеют max-height:600 и width:auto.

Он регистрируется как ошибка в окончательной версии IE8 без исправления.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

Существует действительно, очень хакерский способ обхода CSS:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

и, конечно же, условный CSS, о котором говорили другие, но мне это не нравится, потому что это означает, что вы обслуживаете лишний HTML-треск в каждом запросе страницы.

Ответ 2

{
overflow:auto
}

Попробуйте переполнение div: auto

Ответ 3

Я видел, что это зарегистрировалось как исправленная ошибка в RC1. Но я нашел вариант, который, кажется, вызывает жесткий отказ от подтверждения. Вовлекает эти два стиля во вложенную таблицу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
    .calendarBody
    {
        overflow: scroll;
        max-height: 500px;
    }
    </style>
</head>
<body>
    <table>
    <tbody>
        <tr>
        <td>
            This is a cell in the outer table.
        <div class="calendarBody">
            <table>
                <tbody>
                <tr>
                    <td>
                    This is a cell in the inner table.
                </td>
                    </tr>
            </tbody>
                </table>
        </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

Ответ 4

{max-height:200px, Overflow:auto}

Благодаря Srinivas Tamada, приведенный выше код действительно сработал у меня.

Ответ 5

Воспроизведение:

(Это приводит к сбою всей страницы.)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                X
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(В то время как это отлично работает...)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                The quick brown fox
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(И, безумно, так и получается. [Нет содержания в div вообще.])

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

Ответ 6

Аналогичная ситуация, элемент pre с maxHeight, установленный js для размещения в выделенном пространстве, ширина 100%, переполнение auto. Если содержание короче, чем maxHeight, а также подходит по горизонтали, мы хорошие. Если вы измените размер окна таким образом, чтобы содержимое больше не соответствовало горизонтали, появится горизонтальная полоса прокрутки, но высота элемента сразу переходит к полному maxHeight, независимо от высоты содержимого.

Пробовал различные формы взлома css, упомянутые Джеффом, но не нашел ничего подобного, что не было ошибкой js bad-parameter.

Лучшее, что я мог найти, - это выбрать ваш яд для ie8: либо снимите ограничение maxHeight, поэтому элемент может быть любой высоты (лучше всего для моего случая) или установить высоту, а не maxHeight, поэтому она всегда такая высокая, даже если сам контент намного короче. Очень не идеально. Ухудшенное поведение ушло в ie9.

Ответ 7

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

Ответ 8

Я нашел это: https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

Этот метод был проверен в IE6, а также должен работать в IE5. Просто измените значения в соответствии с вашими потребностями (код прокомментирован пояснительными примечаниями). В этом примере мы устанавливаем максимальную высоту в 333px 1 для IE и всех совместимых со стандартами браузеров:

* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }

и это работает для меня отлично, поэтому я решил поделиться этим.