internet-explorer-8overflowcss

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

просмотры: 68.7K

У меня есть элемент, который может содержать очень большие объемы данных, но я не хочу, чтобы он разрушал макет страницы, поэтому я установил 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, но он оставляет много пустого места на случай, если данных не так много.

Источник

Ответов (8)

Решение

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

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

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

There is a really, really hacky CSS workaround:

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 
}

and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.

Источник

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

Источник
{
overflow:auto
}

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

Источник

Я нашел это: 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 */ }

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

Источник

Я видел это как исправленную ошибку в 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>
Источник

Воспроизвести:

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

<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>
Источник
{max-height:200px, Overflow:auto}

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

Источник

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

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

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

Источник