Desbordamiento IE8: auto con altura máxima

Question

Desbordamiento IE8: auto con altura máxima

Tengo un elemento que puede contener grandes cantidades 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 estuviera presente en lugar de overflow:auto.

He intentado overflow:scroll, todavía no ayuda, IE8 simplemente trunca el contenido sin mostrar barras de desplazamiento. Cambiar la declaración max-height a height hace que el desbordamiento funcione BIEN, es combinación de max-height y overflow:auto que rompe las cosas.

Esto también se registra como un error oficial en la versión final de lanzamiento de IE8

¿Hay alguna solución? Por ahora recurrí a usar height en lugar de max-height, pero deja mucho espacio vacío en caso de que no haya muchos datos.

52

css internet-explorer-8 overflow

Author: p.campbell, 2008-08-11

Source

8 answers

{
overflow:auto
}

Prueba div overflow: auto

4

Author: Egglabs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-11 13:26:05

Vi esto registrado como un error corregido en RC1. Pero he encontrado una variación que parece causar un fallo de renderizado difícil de afirmar. Involucra 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>

3

Author: James Koch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-03-23 16:26:54

{max-height:200px, Overflow:auto}

Gracias a Srinivas Tamada, el código anterior funcionó para mí.

2

Author: ashipj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-27 07:33:30

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 ajuste horizontalmente, aparecerá 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 hack css mencionado por Jeff, pero no encontró nada como si no fuera un error de parámetro malo de js.

Lo mejor que pude encontrar fue elegir su veneno para ie8: O bien eliminar el límite de maxHeight, por lo que el elemento puede ser cualquier altura (lo mejor para mi caso), o establecer altura en lugar de maxHeight, por lo que siempre es tan alto incluso si el contenido en sí es mucho más corto. No es lo ideal. Comportamiento wacked se ha ido en ie9.

1

Author: enigment,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-18 18:57:37

Establezca solo la altura máxima y no establezca el desbordamiento. De esta manera se 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.

1

Author: Abdul Rauf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-01 07:47:06

Para 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, esto también. [Ningún 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>

1

Author: C1pher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-10 16:19:08

Encontré esto : https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer /

Este método ha sido verificado en IE6 y también debería funcionar en IE5. Simplemente cambie los valores para adaptarse a sus necesidades (código comentado con notas explicativas). En este ejemplo, establecemos 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.

0

Author: Vadim Svv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-17 17:40:20

score 71 · Accepted Answer

Este es un error realmente desagradable, ya que nos afecta en gran medida en el Desbordamiento de pila con <pre> bloques de código, 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 muy, muy hacky 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 
}

Y por supuesto CSS condicional como otros han mencionado, pero no me gusta porque significa que estás sirviendo HTML adicional cruft en cada solicitud de página.