Переполнение IE8: авто с максимальной высотой - PullRequest
Новая
       115

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

53 голосов
/ 11 августа 2008

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

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

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

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

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

Ответы [ 8 ]

72 голосов
/ 19 мая 2009

Это действительно неприятная ошибка, поскольку она сильно влияет на нас при переполнении стека с помощью <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 в каждом запросе страницы.

4 голосов
/ 11 февраля 2011 
{
overflow:auto
}

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

3 голосов
/ 21 марта 2009

Я видел это как исправленную ошибку в 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>
2 голосов
/ 03 мая 2011 
{max-height:200px, Overflow:auto}

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

1 голос
/ 01 ноября 2012

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

1 голос
/ 18 августа 2011

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

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

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

1 голос
/ 05 октября 2010

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

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

<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>
0 голосов
/ 17 ноября 2015

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

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

...