www w3schools w3school used people page most many internet how browsers asp html css internet-explorer-9

html - w3schools - Altura máxima y desbordamiento no desplazándose en ie9



w3schools web page size (1)

Tengo un problema muy extraño en ie9 donde un div con una altura máxima (establecido con calc () y vh) y un desbordamiento automático no se está desplazando.

Puedes ver lo que está pasando haciendo clic en esta imagen (si el GIF no se carga aquí):

Mi HTML:

<div class="modal"> <div class="modal__title">Modal Title</div> <div class="modal__body"> <p>When I am too tall, I should scroll on ie9, but I don''t.</p> </div> <div class="modal__footer">Footer here</div> </div>

CSS relevante:

.modal { min-width: 500px; max-width: 800px; border-radius: 4px; max-height: 65vh; overflow: hidden; background-color: white; position: fixed; top: 15vh; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .modal__body { max-height: calc(65vh - 120px)); // 120 is the combined height of the header and footer overflow-y: auto; }

No entiendo por qué sucede esto, ya que ie9 soporta vh, calc () y max-height. ¿Algunas ideas?

Demostración de JSFiddle: https://jsfiddle.net/sbgg5bja/3/


Parece ser un problema de repintado, cuando se combina position: fixed y transform: translate .

Aquí hay 2 soluciones posibles:

  • Establezca la propiedad de desbordamiento para desplazarse. Es decir, overflow-y:scroll
  • -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod=''auto expand'')";

Src: ¿Cómo resolver el problema de repintado de desplazamiento de IE9 con un padre de posición fija que tiene la transformación -ms: traducir?

Si ninguno de estos lo hace, puede eliminar la transform: translate y usar, por ejemplo, display: table para centrarla.