大家好,我遇到了一个关于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在vis
和menu
之间给我留下了2px的间隙,而IE和Firefox将我的最后一个div vis
放在了新行中。页眉和页脚没问题。我只是把它们放在这里让您在您的计算机上测试。我希望使用%
,因为我希望这适用于所有分辨率。