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 在其他浏览器中也能完美地相互匹配？Chrome 正是我所需要的。Safari 给了我 2px 和 IE 之间的差距，vis而menuFirefox 将我的最后一个 divvis放在新行中。页眉和页脚都没问题。我只是把它们放在你的电脑上测试它。我想拥有%，因为我希望它可用于所有分辨率。

4

4 回答 4

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 回答
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; }

​--

white-space: nowrap，font-size: 0，display: inline-blocks成功了。

于 2012-06-19T08:43:50.640 回答
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 回答