margin在IE中没有显示,该如何解决

margin在IE中没有显示
<html>
<head>
<title>
float属性
</title>
<style type="text/css">
div
{
border: 1px;
background-color:#ffff99;
}
.father
{
padding:20px;
border-style: inset;
margin: 10px;
}
.father div
{
background-color:#90baff;
margin: 10px;
height:10px;
padding:10px;
}
.son1
{
background-color:Plum ;
padding:10px;
border-width:1px;
border-style: dotted;
margin-top: 10px;
margin-bottom:10px;
float: left;
height:10px;
}

.son2
{
background-color:Plum;
padding:10px;
border-width:1px;
border-style: dotted;
margin-top: 10px;
margin-bottom:10px;
float: left;
height:10px;
}

.son3
{
background-color: Black;
padding:10px;
border-width:1px;
border-style: dotted;
margin-top: 10px;
margin-bottom:10px;
float: left;
height:10px;
}
.father p
{
background-color: #90baff;
border: dotted 1px;
margin: 10px;
_height:10px;

}

</style>
<div class="father">
<div class="son1">
box-1
</div>
<div class="son2">
box-2
</div>
<div class="son3">
box-3
</div>
<p>
这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.
</p>
</div>
</head>
</html>

<!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>
<title>float属性</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
}

.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}

.father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}

.father p{
border:1px dashed #111111;
background-color:#ff90ba;
}

.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:left;

}

</style>
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">Box-3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
</div>
</body>
</html>
为什么第一个网页box-1与文字的margin显示不出来

------解决思路----------------------
<div class="father">
<div class="son1">
box-1
</div>
<div class="son2">
box-2
</div>
<div class="son3">
box-3
</div>
<p>
这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.
</p>
</div>

这一段代码你写在了head里面把他拿出来放在body中
------解决思路----------------------
不知道你要问什么，这个不对吗？
margin在IE中没有显示,该如何解决

------解决思路----------------------
你这两个页面显示的效果不一样吗？第一个网页中你在.father div中已经定义过了margin: 10px;，所以在.son1中定义margin-top和margin-bottom为10px，最终还是显示margin为10px，不会因为定义了两次显示为20px。
你的浏览器版本是多少

引用:

另外，要是把margin-top: 5px;
margin-bottom:5px;
注释掉，为什么浮动效果就没有了

------解决思路----------------------
参考: CSS 浮动

引用:

大神们能指教一下float属性用法吗

margin在IE中没有显示,该如何解决

相关推荐