altezza iframe in% non funziona con IE

Question

Il titolo dice tutto, mentre in altezza diversi browser: 61%; funziona bene non in IE, sembra che automaticamente altezza imposta totalmente ignorando il mio CSS. Se provo ad impostarlo su pixel, funziona bene, ma voglio che l'altezza si adatti alle risoluzioni più basse, quindi ho bisogno di usare il 61% qui.

Codice:

#ifrm 
{ 
overflow: hidden; 
width: 70%;  /*990px*/ 
height: 61%;  /*630px*/ 
border-width: 0px; 
margin: 0 auto 0 auto; 
float: left; 
} 

Altezza contenitore div è impostato su 100%

Questo è come sembra su Chrome:

E questo è come sembra su IE:

Personalmente odio questo browser così tanto perché è sempre m fa un sacco di problemi. Ieri sono stato costretto a cambiare le immagini SVG in PNG sulla mia animazione perché IE non è in grado di gestire la rotazione e tutto è stato distorto ^^ Qualche idea?

Ecco la demo:

http://klaunfizia.pl/damian/

Answer 1

In realtà non è un problema con IE, Firefox riesco a vedere lo stesso in IE.

Prova a mettere:

html, body{ 
    height: 100%; 
} 

Ciò accade perché il browser di default imposta la larghezza al 100% per tutti gli elementi di blocco, ma questo non è il comportamento predefinito per l'altezza.

Answer 2

Tutto ciò che devi veramente fare è impostare CSS sull'iframe per utilizzare la visualizzazione dei blocchi. Quindi l'altezza sarà onorata.

#ifrm 
{ 
overflow: hidden; 
width: 70%;  /*990px*/ 
height: 61%;  /*630px*/ 
border-width: 0px; 
margin: 0 auto 0 auto; 
float: left; 
display: block; 
}