3

こんにちは、html の div に問題があります。Chrome で正しく設定しましたが、Firefox または IE を使用している場合、最後の div は次の行になります。

これが私のコードです：

<div id="container">
    <div id="header"></div>
    <div id="left"></div>
    <div id="menu"></div>
    <div id="vis"></div>
    <div id="footer"></div>
<div>

そして彼らのCSS：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#vis
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}
#container
 {
 width:98%;
 padding-left:1%;
 padding-right:1%;
 }
#header
 {
 background-color:#4671D5;
 -moz-border-radius-topleft: 100px 50px;
  border-top-left-radius: 100px 50px;
  -moz-border-radius-topright: 100px 50px;
  border-top-right-radius: 100px 50px;
 }

この div を他のブラウザでも完全に一致させるにはどうすればよいですか? クロムはまさに私が必要としているものです。Safariでは 2px と IE の間にギャップがvisあり、Firefox では最後の divが新しい行に配置されます。ヘッダーとフッターは問題ありません。PCでテストできるように、それらを配置しました。そして、これをすべての解像度で使用できるようにしたいのです。menuvis%

4

4 に答える 4

3

解決策はここにあります：http：//jsfiddle.net/J5fVj/

  • これ以上のラッピングはありません
  • divの間にこれ以上のスペースはありません

HTML :(テスト用のサンプルテキスト付き）

<div id="container">
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="menu">menu</div>
    <div id="vis">vis</div>
    <div id="footer"></div>
<div>​

更新されたスタイルシート：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
display: inline-block;
}
#menu
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
display: inline-block;
margin:0;
}
#vis
{
 background-color:#D4EAE4;
 display: inline-block;
 width:11%;
 height:570px;
 margin:0;
    border-left: 1px solid #d0d0d0;
}
#container
 {
 width:98%;
 padding-left:1%;
 padding-right:1%;
 white-space: nowrap;
 font-size: 0;
 }
#header
 {
 background-color:#4671D5;
 -moz-border-radius-topleft: 100px 50px;
  border-top-left-radius: 100px 50px;
  -moz-border-radius-topright: 100px 50px;
  border-top-right-radius: 100px 50px;
}

#header, #left, #menu, #vis { font-size: 20px; text-align: center; }

-

空白：nowrap、font -size：0、display：inline-blocksがうまくいきました。

于 2012-06-19T08:43:50.640 に答える
3

メニューCSSを変更

#menu 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.1%;//previos 15.25% 
float:left; 
margin:0; 
}

実際のデモhttp://jsfiddle.net/J5fVj/2/

于 2012-06-19T08:13:04.993 に答える
1

3 つの div のパーセンテージの合計が 100% をわずかに超えているため、問題が発生している可能性があります。左の div のサイズを 72% に減らしてみてください

于 2012-06-19T08:11:00.500 に答える
0

marginfor div#container(eg margin: 0;) も各ブラウザで同じになるように定義する必要があると思います。定義されていない場合、ブラウザーはデフォルト値を使用し、さまざまなブラウザーでさまざまな値になる可能性があり、正確な幅の計算に失敗する可能性があります。

于 2012-06-19T08:18:18.560 に答える