tengo un elemento que puede contener cantidades muy grandes de datos, pero no quiero que se arruine el diseño de la página, así que me puse max-height: 100px y overflow:auto, con la esperanza de que las barras de desplazamiento aparecen cuando el contenido no encajaIE8 overflow: auto con max-height

Todo funciona bien en Firefox e IE7, pero IE8 se comporta como si overflow:hidden estuviera presente en lugar de overflow:auto.

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

Esto también se registra como un official bug in the final, release version of IE8

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

Fuente

2008-08-11 Rytis

Nota: esto parece arreglado en IE9 (al menos, en el RC) –

Solo una nota para personas que encuentran esto más tarde, he visto establecer max-height y overflow en un div en IE8 bloquear toda la página - como en la página permanece completamente en blanco, pero se muestra el título de la página. Diversión divertida ... – James

Sí, establecer la altura máxima y el desbordamiento provocaron que una página no se renderice (completamente en blanco). Cambié a desbordamiento, ya que funcionó para mis necesidades. –

Esto es un error muy desagradable, ya que nos afecta en gran medida de 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 con ninguna solución.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

Hay una solución 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 CSS por supuesto condicional como otros han mencionado, pero no me gusta que debido a que usted quiere decir' re sirviendo adicional cruft HTML en cada petición.

Fuente

2009-05-19 08:34:12

+1 pero me gustaría poder +10 esto ... –

Me sale un 404 en el enlace de Microsoft. –

¡Esto no funciona en IE8! – kheya

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>

Fuente

2009-03-20 22:15:05

para reproducir:

(Esto se 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, loca y lo mismo ocurre con este . [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>

Fuente

2010-10-05 10:27:17 ANeves

{ 
overflow:auto 
}

Try div overflow: auto

Fuente

2011-02-11 13:26:05 Egglabs

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

Gracias a Srinivas Tamada, El código anterior hizo el trabajo para mí.

Fuente

2011-05-03 10:00:08 ashipj

situación similar, un elemento pre con maxHeight establecido por js para encajar en el espacio asignado, anchura 100%, desbordamiento de auto.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.

Probé varias formas del hack de css mencionadas 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, para que el elemento pueda ser de cualquier altura (mejor para mi caso) o establecer altura en lugar de maxHeight, por lo que siempre es alto aunque el contenido en sí es mucho más corto. Muy no ideal. El comportamiento de Wack se ha ido en ie9.

Fuente

2011-08-18 18:57:37 enigment

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.

Fuente

2012-11-01 07:47:06

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 el max-333px altura a 1 para IE y todos los navegadores compatibles 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.

Fuente

2015-11-17 17:40:20

IE8 overflow: auto con max-height

Respuesta

para reproducir:

Cuestiones relacionadas