У меня есть элемент, который может содержать очень большие объемы данных, но я не хочу, чтобы он испортил макет страницы, поэтому я установил 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-фрезы в каждом запросе страницы.
Я видел это зарегистрировано как исправленную ошибку в 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>Воспроизвести:
(Это приводит к сбою всей страницы.)
<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>{
overflow:auto
}Попробуйте переполнение div: авто
{max-height:200px, Overflow:auto}Благодаря Шринивасу Тамаде, приведенный выше код помог мне.
Аналогичная ситуация, предварительный элемент с maxHeight, установленным js для размещения в выделенном пространстве, ширина 100%, переполнение авто. Если контент короче, чем maxHeight, а также умещается горизонтально, это хорошо. Если вы измените размер окна, чтобы содержимое больше не помещалось по горизонтали, появится горизонтальная полоса прокрутки, но высота элемента сразу же переместится на полную maxHeight, независимо от высоты содержимого.
Пробовал различные формы хака css, упомянутые Джеффом, но не нашел ничего подобного, которое не было бы ошибкой js с плохим параметром.
Лучшее, что я мог найти, это выбрать яд для ie8: либо сбросить ограничение maxHeight, чтобы элемент мог иметь любую высоту (лучше всего подходит для моего случая), либо установить высоту, а не maxHeight, поэтому он всегда такой высокий, даже если сам контент намного короче. Очень не идеально. Ошарашенное поведение ушло в ie9.
Установите только максимальную высоту и не устанавливайте переполнение. Таким образом, она будет показывать полосу прокрутки, если содержимое больше максимальной высоты, и сжимается, если содержимое меньше максимальной высоты.
Я нашел это: 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 */ }
и это работает для меня отлично, поэтому я решил поделиться этим.