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

8 52
css internet-explorer-8 overflow

8 ответов:

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

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

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

есть действительно суховато УСБ обходной путь:

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 
}

и, конечно же, условный CSS, как упоминали другие, но мне это не нравится, потому что это означает, что вы обслуживаете дополнительный HTML cruft в каждом запросе страницы.

71
{
overflow:auto
}

попробуйте переполнение div: auto

4

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

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

2

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

пробовал различные формы взлома css, упомянутые Джеффом, но не нашел ничего подобного, что не было ошибкой JS bad-parameter.

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

1

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

1

воспроизведение:

(Это аварийно завершает работу всей страницы.)

<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

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

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

0