0

我的网站上有这段代码,它在 Firefox 中完美运行,但 chrome 无法在任何方式使其在 chrome 中运行。我试图将 iframe 放入 Height: 95% 但它不准确。注意:在 iframe jsFiddle 的高度看起来很糟糕(不知道为什么)

在铬: 镀铬

在火狐中: 在火狐中

<html>
<body>
<header>
</header>
<nav>
</nav>
<content>
<div style="padding-left:180px;padding-top:45px">
<iframe src="http://message2space.es.vu" name="c" id="c" frameborder="0"></iframe>
</div>
</content>
</html>
<!-- and the css: --!>
header{
   z-index:100000001;
   height:45px; 
   width:100%;
   background: -webkit-linear-gradient(#A9A9A9, #797979);
   background: -moz-linear-gradient(#A9A9A9, #797979);
   background: -o-linear-gradient(#A9A9A9, #797979); 
   left: 0px; 
   position: absolute; 
   top: 0px;
   background-color:#A9A9A9
}
nav{
    position:absolute;
    top:0px;
    left:0px;
    z-index:10000000;
    background-color: #424242;
    height:100%;
    width:180px;
}
content{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%
}
iframe{
    width:100%;
    height:100%
}

http://jsfiddle.net/gsu2H/1/

4

1 回答 1

1

我会说 Chrome 显示是正确的。因为你试图给出 100% 的高度和45px的偏移量。

一个简单的解决方案是box-sizing更改元素的 CSS 框模型,因此只需更改此行:

<div style="padding-left:180px;padding-top:45px">

到:

<div style="box-sizing:border-box;padding-left:180px;padding-top:45px;height:100%">

您可能希望添加-moz-供应商前缀,box-sizing因为 Firefox尚不支持W3C 版本。

于 2013-04-06T12:58:54.207 回答