Desbordamiento de IE8: automático con altura máxima
https://stackoverflow.com/questions/7707
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un elemento que puede contener cantidades muy grandes de datos, pero no quiero que arruine el diseño de la página, así que configuré max-height: 100px y overflow:auto, esperando que aparezcan barras de desplazamiento cuando el contenido no encaje.
Todo funciona bien en Firefox e IE7, pero IE8 se comporta como si overflow:hidden estaba presente en lugar de overflow:auto.
Lo intenté overflow:scroll, todavía no ayuda, IE8 simplemente trunca el contenido sin mostrar barras de desplazamiento.Cambiando max-height declaración a height hace que el desbordamiento funcione bien, es la combinación de max-height y overflow:auto que rompe cosas.
Esto también se registra como un error oficial en la versión final de IE8
¿Existe alguna solución?Por ahora recurrí al uso height en lugar de max-height, pero deja mucho espacio vacío en caso de que no haya muchos datos.
Solución
Este es un error realmente desagradable ya que nos afecta mucho en Stack Overflow con <pre> bloques de código, que tienen max-height:600 y width:auto.
Está registrado como un error en la versión final de IE8 sin solución.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Existe una solución CSS realmente complicada:
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
}
y, por supuesto, CSS condicional como otros han mencionado, pero no me gusta porque significa que estás ofreciendo contenido HTML adicional en cada solicitud de página.
Otros consejos
{
overflow:auto
}
Pruebe div overflow:auto
Vi esto registrado como un error solucionado en RC1.Pero encontré una variación que parece causar una falla en el procesamiento de aseveración.Implica estos dos estilos en una tabla anidada.
<!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}
Gracias a Srinivas Tamada, el código anterior funcionó para mí.
Situación similar, un elemento previo con maxHeight establecido por js para caber en el espacio asignado, ancho 100%, desbordamiento automático.Si el contenido es más corto que maxHeight y también se ajusta horizontalmente, estamos bien.Si cambia el tamaño de la ventana para que el contenido ya no se ajuste horizontalmente, aparece una barra de desplazamiento horizontal, pero la altura del elemento salta inmediatamente a la altura máxima completa, independientemente de la altura del contenido.
Probé varias formas del truco CSS mencionado por Jeff, pero no encontré nada parecido que no fuera un error de parámetro incorrecto de js.
Lo mejor que pude encontrar fue elegir tu veneno para ie8:O elimine el límite maxHeight, para que el elemento pueda tener cualquier altura (lo mejor para mi caso), o establezca la altura en lugar de maxHeight, para que siempre sea así de alto, incluso si el contenido en sí es mucho más corto.Muy no ideal.El comportamiento extraño ha desaparecido en ie9.
Establezca solo la altura máxima y no establezca el desbordamiento.De esta manera, mostrará la barra de desplazamiento si el contenido supera la altura máxima y se reducirá si el contenido es inferior a la altura máxima.
Reproducir:
(Esto bloquea toda la página).
<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>
(Mientras que esto funciona bien...)
<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>
(Y, increíblemente, esto también.[No hay ningún contenido en el 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>
Encontré esto :https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
Este método se ha verificado en IE6 y también debería funcionar en IE5.Simplemente cambie los valores para adaptarlos a sus necesidades (código comentado con notas explicativas).En este ejemplo, configuramos la altura máxima en 333px 1 para IE y todos los navegadores que cumplen con los estándares:
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
y esto funciona perfectamente para mí, así que decidí compartir esto.
