Переполнение 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, но он оставляет много пустого места на случай, если данных не так много.


css overflow internet-explorer-8
person Rytis    schedule 11.08.2008    source источник
comment
Примечание: это исправлено в IE9 (по крайней мере, в RC)   -  person Marc Gravell    schedule 11.02.2011
comment
Просто примечание для людей, которые обнаружат это позже, я видел, как установка max-height и overflow на div в IE8 приводила к сбою всей страницы - так как страница остается полностью пустой, но отображается заголовок страницы. Весело весело ...   -  person James    schedule 19.07.2011
comment
Да, установка max-height и overflow привела к тому, что страница не отображалась (полностью пустая). Я перешел на overflow-y, так как это помогло мне.   -  person Wizard of Ogz    schedule 13.12.2011

Ответы (8)


arrow_upward
72
arrow_downward

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

person Jeff Atwood    schedule 19.05.2009
comment
Я получаю 404 по ссылке Microsoft. - person Craig Walker; 26.04.2010
comment
спасибо за подробности: my.opera (ссылка) теперь закрыта ... - person ptim; 25.06.2014
comment
Я не думаю, что кто-нибудь знает, куда могла быть перенесена ссылка Microsoft? - person Mike Gwilt; 08.06.2015

arrow_upward
4
arrow_downward 

{
overflow:auto
}

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

person Egglabs    schedule 11.02.2011

arrow_upward
3
arrow_downward

Я видел это как исправленную ошибку в 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>
person James Koch    schedule 20.03.2009

arrow_upward
2
arrow_downward 

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

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

person Ashish Joseph    schedule 03.05.2011

arrow_upward
1
arrow_downward

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

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

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

person enigment    schedule 18.08.2011

arrow_upward
1
arrow_downward

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

person Abdul Rauf    schedule 01.11.2012

arrow_upward
1
arrow_downward

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

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

<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>
person Community    schedule 05.10.2010

arrow_upward
0
arrow_downward

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

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

person Vadim Svv    schedule 17.11.2015