一个html因为margin加倍导致的有关问题
日期：2014-05-17 浏览次数：20796 次
一个html因为margin加倍导致的问题
大家帮我看看这个html页面，ie8，ff都是好的，可就是在ie6中框因为margin加倍而过宽，加display又会导致div错乱，哪位大侠能帮我修改下，谢谢了！！代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
#container{
width:960px;
margin:0 auto;
background:#fff;
overflow:hidden;
}
#header{
width:960px;
height:101px;
float:left;
background-color:Blue;
}
#nav{
width:960px;
float:left;
height:46px;
margin:0 auto;
background-color:Red;
}
#banner{
width:960px;
height:280px;
float:left;
background-color:Black;
}
#center{
width:960px;
_height:735px;
min-height:735px;
float:left;
background-color:Green;
}
#main{
width:958px;
_height:623px;
min-height:623px;
margin:0 0 30px 0;
border:1px solid red;
position:relative;
}
#contant1{
width:898px;
_height:600px;
min-height:600px;
border:1px solid blue;
margin:10px 30px 10px 30px;
}
#c01{
width:819px;
margin:10px 40px 10px 40px;
_height:550px;
min-height:550px;
float:left;
border:1px solid gray;
background-color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="banner">
</div>
<div id="center" >
<div id="main">
<div id="top1"></div>
<div id="list" >
<div id="contant1" >
<div id="c01" >
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
------解决方案--------------------
#c01{
width:819px;
margin:10px 40px 10px 40px;
_height:550px;
min-height:550px;
float:left;
border:1px solid gray;
background-color:White;
}
把float:left;去掉不就行了
------解决方案--------------------
在浮动的样式里面加个
display:inline;
------解决方案--------------------
ie6如果用float:left;然后margin的话会有双倍间距的。
所以在用float:left;和margin的样式里加个display:inline就成了
------解决方案--------------------
上面的是对的
大家帮我看看这个html页面，ie8，ff都是好的，可就是在ie6中框因为margin加倍而过宽，加display又会导致div错乱，哪位大侠能帮我修改下，谢谢了！！代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
#container{
width:960px;
margin:0 auto;
background:#fff;
overflow:hidden;
}
#header{
width:960px;
height:101px;
float:left;
background-color:Blue;
}
#nav{
width:960px;
float:left;
height:46px;
margin:0 auto;
background-color:Red;
}
#banner{
width:960px;
height:280px;
float:left;
background-color:Black;
}
#center{
width:960px;
_height:735px;
min-height:735px;
float:left;
background-color:Green;
}
#main{
width:958px;
_height:623px;
min-height:623px;
margin:0 0 30px 0;
border:1px solid red;
position:relative;
}
#contant1{
width:898px;
_height:600px;
min-height:600px;
border:1px solid blue;
margin:10px 30px 10px 30px;
}
#c01{
width:819px;
margin:10px 40px 10px 40px;
_height:550px;
min-height:550px;
float:left;
border:1px solid gray;
background-color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="banner">
</div>
<div id="center" >
<div id="main">
<div id="top1"></div>
<div id="list" >
<div id="contant1" >
<div id="c01" >
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
------解决方案--------------------
#c01{
width:819px;
margin:10px 40px 10px 40px;
_height:550px;
min-height:550px;
float:left;
border:1px solid gray;
background-color:White;
}
把float:left;去掉不就行了
------解决方案--------------------
在浮动的样式里面加个
display:inline;
------解决方案--------------------
ie6如果用float:left;然后margin的话会有双倍间距的。
所以在用float:left;和margin的样式里加个display:inline就成了
------解决方案--------------------
上面的是对的
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
