html - % 中的 iframe 高度不适用于 IE

Question

标题说明了一切，而在不同的浏览器中高度：61%；工作正常，它在 IE 中没有，似乎它自动设置高度完全忽略了我的 CSS。如果我尝试将其设置为像素，它可以正常工作，但我希望高度适合较低的分辨率，所以我需要在这里使用 61%。

代码：

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

容器 div 高度设置为 100%

这是它在 Chrome 上的样子：

这就是它在 IE 上的样子：

我个人非常讨厌这个浏览器，因为它总是会带来很多麻烦。昨天我被迫在我的动画上将 SVG 更改为 PNG 图像，因为 IE 无法处理旋转并且整个事情都被扭曲了 ^^ 有什么想法吗？

这是演示：

http://klaunfizia.pl/damian/

Answer 1

事实上，这不是 IE 的问题，在 Firefox 中我可以看到与在 IE 中相同的情况。

试着把：

html, body{
    height: 100%;
}

发生这种情况是因为浏览器默认将所有块元素的宽度设置为 100%，但这不是高度的默认行为。

Answer 2

您真正需要做的就是在 iframe 上设置 CSS 以使用块显示。那么身高就会得到尊重。

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