0

私のサイトにこのコードがあり、Firefox で完全に動作しますが、Chrome では動作しません。iframe を Height: 95% に配置しようとしましたが、正確ではありません。注: iframe の高さで jsFiddle の見た目が悪い (理由がわからない)

クロムで： クロームで

Firefox の場合: ファイアフォックスで

<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%">

Firefoxはまだ W3C バージョンをサポートしていない-moz-ため、おそらくベンダー プレフィックスを追加する必要があります。box-sizing

于 2013-04-06T12:58:54.207 に答える