internet explorer 8 - para - Desbordamiento de IE8: automático con altura máxima
internet explorer 8 windows xp (8)
Tengo un elemento que puede contener grandes cantidades de datos, pero no quiero que arruine el diseño de la página, así que configuro max-height: 100px y overflow:auto , esperando que aparezcan las barras de desplazamiento cuando el contenido no encaja .
Todo funciona bien en Firefox e IE7, pero IE8 se comporta como si overflow:hidden estaba presente en lugar de overflow:auto .
Probé overflow:scroll , aún no ayuda, IE8 simplemente trunca el contenido sin mostrar barras de desplazamiento. Cambiar la declaración de height max-height a la 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.
¿Hay alguna solución? Por ahora, recurrí al uso de la height lugar de max-height , pero deja mucho espacio vacío en caso de que no haya mucha información.
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 satisfacer sus necesidades (código comentado con notas explicativas). En este ejemplo, estamos estableciendo la altura máxima en 333px 1 para IE y todos los navegadores compatibles con estándares:
* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }
y esto me funciona a la perfección, así que decidí compartir esto.
Situación similar, un elemento pre 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 adapte horizontalmente, aparece una barra de desplazamiento horizontal, pero la altura del elemento salta inmediatamente al máximo de altura, independientemente de la altura del contenido.
Intenté varias formas del css hack mencionado por Jeff, pero no encontré nada parecido que no fuera un error de js-parameter.
Lo mejor que pude encontrar fue elegir su veneno para ie8: O soltar el límite de maxHeight, de modo que el elemento puede ser de cualquier altura (lo mejor para mi caso) o establecer altura en lugar de maxHeight, por lo que siempre es alto incluso si el contenido es mucho más corto. Muy no ideal. El comportamiento de Wack se ha ido en ie9.
Vi esto registrado como un error reparado en RC1. Pero he encontrado una variación que parece causar una falla de renderización de afirmación difícil. 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>
{
overflow:auto
}
Prueba div overflow: auto
Establezca la altura máxima solamente y no configure el desbordamiento. De esta forma, mostrará la barra de desplazamiento si el contenido es mayor que la altura máxima y se reduce si el contenido es menor que la altura máxima.
{max-height:200px, Overflow:auto}
Gracias a Srinivas Tamada, el código anterior funcionó para mí.
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, locamente, también lo hace. [Sin contenido en el div en absoluto.])
<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>
Este es un error realmente desagradable, ya que nos afecta mucho en con bloques de código <pre> , que tienen max-height:600 y width:auto .
Se registra como un error en la versión final de IE8 sin corrección.
http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759
Hay una solución de CSS muy, muy hacky:
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 lo han mencionado, pero no me gusta porque significa que estás publicando más crumble de HTML en cada solicitud de página.