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

StackOverflow https://stackoverflow.com/questions/7707

Вопрос

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

Это было полезно?

Решение

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

Другие советы

{
overflow:auto
}

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

Я видел, что это зарегистрировано как исправленная ошибка в 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>

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

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

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

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

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

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

Чтобы воспроизвести:

(При этом происходит сбой всей страницы.)

<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>

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top