У меня есть элемент, который может содержать очень большой объем данных, но я не хочу, чтобы он разрушал макет страницы, поэтому я устанавливаю max-height: 100px
и overflow:auto
, надеясь на появление полос прокрутки, когда содержимое не помещается.
Все это прекрасно работает в Firefox и IE7, но IE8 ведет себя так, как будто вместо overflow:auto
присутствует overflow:hidden
.
Я пробовал overflow:scroll
, все равно не помогает, IE8 просто усекает содержимое без отображения полос прокрутки. Замена объявления max-height
на height
заставляет переполнение работать нормально, а вот комбинация max-height
и overflow:auto
ломает все.
Это также зарегистрировано как официальная ошибка в финальной, релизной версии IE8
Есть ли обходной путь? Пока я прибег к использованию height
вместо max-height
, но это оставляет много пустого пространства в случае, если данных не так много.
Это действительно неприятная ошибка, поскольку она сильно влияет на нас на Stack Overflow с блоками кода <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-мусорку в каждом запросе страницы.
Я видел, что это зарегистрировано как исправленная ошибка в 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}
Благодаря Шринивас тамада, приведенный выше код работал для меня.
(Это приводит к краху всей страницы).
<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>
Аналогичная ситуация, заранее элемент, имеющий значение maxheight установить на JS, чтобы вписаться в отведенное пространство, ширина 100%, перелив автоматический. Если содержание меньше, чем значение maxheight, а также подходит по горизонтали, мы'ре хорошо. Если вы измените размер окна так, чтобы содержимого уже не подходит по горизонтали, появляется горизонтальная полоса прокрутки, но высота элемента сразу же переходит в полное значение maxheight, независимо от высоты контента.
Пробовал различные формы CSS-Хак отметил Джефф, но я'т найти ничего подобного, что было'т на JS плохо-параметр ошибки.
Лучшее, что можно найти, чтобы забрать свой яд для IE8: либо уронить значение maxheight предел, так что элемент может быть любой высоты (лучше всего в моем случае), или набор высоты, а не максимальная высота, поэтому он's всегда что высокий, даже если сам контент намного короче. Очень не идеально. Поведение мочить ушел в IE9.
Набор Макс-только высота и Дон'т установить переполнения. Таким образом, он будет показывать полосы прокрутки, если содержимое больше, чем Макс-высота и уменьшается, если содержание меньше, чем максимальная высота.
Я нашел это : https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
&ГТ; этот метод был проверен в IE6, а также должны работать в режиме IE5. Просто измените значения в соответствии с вашими потребностями (код комментарии с пояснениями). В этом примере мы установка Max-высота, на 333px 1 для IE и все стандарты-совместимых браузерах:
&ГТ;* HTML-код div#дивизию { высота: выражение( это.scrollHeight &ГТ; 332 ? "в 333px-то" : на "Авто", у ); /* устанавливает максимальные высоты для IE */ }
и это работает для меня отлично, так что я решил поделиться этим.