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

11.08.2008 12:18:02
Примечание: это кажется исправленным в IE9 (по крайней мере, в RC)
Marc Gravell♦ 11.02.2011 08:35:46
Просто примечание для людей, которые находят это позже, я видел, как установка максимальной высоты и переполнения для div в IE8 приводит к краху всей страницы - так как на странице остается полностью пустым, но отображается заголовок страницы. Веселье весело ...
James 19.07.2011 09:33:19
Да, установка max-height и overflow приводила к тому, что страница не отображалась (полностью пустая). Я переключился на переполнение-у, так как это работало для моих нужд.
Wizard of Ogz 13.12.2011 06:38:44
8 ОТВЕТОВ
РЕШЕНИЕ

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

72
14.01.2016 19:09:35
Я получаю 404 по ссылке Microsoft.
Craig Walker 26.04.2010 19:53:42
спасибо за подробности: my.opera (связанный) теперь закрыт…
ptim 25.06.2014 07:18:34
Я не думаю, что кто-нибудь знает, куда могла быть перемещена ссылка Microsoft?
Mike Gwilt 8.06.2015 14:30:17

Я видел это зарегистрировано как исправленную ошибку в 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>
3
23.03.2009 16:26:54

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

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

<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>
1
10.01.2014 16:19:08
{
overflow:auto
}

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

4
11.02.2011 13:26:05
{max-height:200px, Overflow:auto}

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

2
27.11.2013 07:33:30

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

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

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

1
18.08.2011 18:57:37

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

1
1.11.2012 07:47:06

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

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

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

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

0
17.11.2015 17:40:20