IE8-Überlauf: automatisch mit maximaler Höhe
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein Element, das sehr große Datenmengen enthalten kann, aber ich möchte nicht, dass es das Seitenlayout ruiniert, also setze ich es max-height: 100px Und overflow:auto, in der Hoffnung, dass Bildlaufleisten angezeigt werden, wenn der Inhalt nicht passt.
In Firefox und IE7 funktioniert alles einwandfrei, aber IE8 verhält sich so overflow:hidden statt vorhanden war overflow:auto.
Ich habe es versucht overflow:scroll, hilft immer noch nicht, IE8 schneidet den Inhalt einfach ab, ohne Bildlaufleisten anzuzeigen.Ändern max-height Erklärung an height Damit der Überlauf funktioniert, ist es die Kombination aus max-height Und overflow:auto das macht Dinge kaputt.
Dies wird auch als protokolliert Offizieller Fehler in der endgültigen Release-Version von IE8
Gibt es eine Problemumgehung?Im Moment habe ich auf die Verwendung zurückgegriffen height anstatt max-height, aber es bleibt viel leerer Platz für den Fall, dass nicht viele Daten vorhanden sind.
Lösung
Dies ist ein wirklich schlimmer Fehler, da er uns stark auf Stack Overflow auswirkt <pre> Codeblöcke, die haben max-height:600 Und width:auto.
Es wird in der endgültigen Version von IE8 als Fehler protokolliert, der nicht behoben werden kann.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Es gibt einen wirklich sehr kniffligen CSS-Workaround:
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
}
und natürlich bedingtes CSS, wie andere bereits erwähnt haben, aber das gefällt mir nicht, weil es bedeutet, dass Sie bei jeder Seitenanforderung zusätzlichen HTML-Cruft bereitstellen.
Andere Tipps
{
overflow:auto
}
Versuchen Sie es mit div overflow:auto
Ich habe gesehen, dass dies als behobener Fehler in RC1 protokolliert wurde.Aber ich habe eine Variante gefunden, die einen Hard-Assert-Render-Fehler zu verursachen scheint.Bezieht diese beiden Stile in eine verschachtelte Tabelle ein.
<!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}
Vielen Dank an Srinivas Tamada. Der obige Code hat bei mir funktioniert.
Ähnliche Situation, ein Pre-Element mit maxHeight, das von js so eingestellt wurde, dass es in den zugewiesenen Platz passt, Breite 100 %, automatischer Überlauf.Wenn der Inhalt kürzer als maxHeight ist und auch horizontal passt, sind wir gut.Wenn Sie die Größe des Fensters ändern, sodass der Inhalt nicht mehr horizontal passt, wird eine horizontale Bildlaufleiste angezeigt, aber die Höhe des Elements springt sofort auf die volle maxHeight, unabhängig von der Höhe des Inhalts.
Habe verschiedene Formen des von Jeff erwähnten CSS-Hacks ausprobiert, aber nichts Vergleichbares gefunden, bei dem es sich nicht um einen js-Bad-Parameter-Fehler handelte.
Das Beste, was ich finden konnte, war, Ihr Gift für ie8 auszuwählen:Entweder lassen Sie die maxHeight-Grenze fallen, damit das Element eine beliebige Höhe haben kann (am besten für meinen Fall), oder Sie legen die Höhe anstelle von maxHeight fest, damit es immer so hoch ist, auch wenn der Inhalt selbst viel kürzer ist.Sehr nicht ideal.Verrücktes Verhalten ist in IE9 verschwunden.
Stellen Sie nur die maximale Höhe ein und legen Sie nicht den Überlauf fest.Auf diese Weise wird die Bildlaufleiste angezeigt, wenn der Inhalt größer als die maximale Höhe ist, und verkleinert, wenn der Inhalt kleiner als die maximale Höhe ist.
Fortpflanzen:
(Dies führt zum Absturz der gesamten Seite.)
<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>
(Während das gut funktioniert...)
<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>
(Und das tut das auch, wahnsinnigerweise.[Überhaupt kein Inhalt in der 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>
Ich habe das gefunden :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
Diese Methode wurde in IE6 verifiziert und sollte auch in IE5 funktionieren.Ändern Sie einfach die Werte entsprechend Ihren Anforderungen (Code mit Erläuterungen kommentiert).In diesem Beispiel legen wir die maximale Höhe für IE und alle standardkonformen Browser auf 333px 1 fest:
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
und das funktioniert bei mir perfekt, also habe ich beschlossen, dies zu teilen.
