IE8 overflow:auto с макс. высотой
У меня есть элемент, который может содержать очень большие объемы данных, но я не хочу, чтобы он разрушил макет страницы, таким образом, я установил 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, но это оставляет много вакуума в случае, если нет большого количества данных.
2 ответа
Это действительно неприятная ошибка, поскольку она сильно влияет на нас при переполнении стека с помощью блоков кода, которые имеют
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-мусор в каждом запросе страницы.
Я видел, что это зарегистрировалось как исправленная ошибка в 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>