以下CSS代码在IE和火狐中的兼容问题怎样解决啊，求帮忙
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>css</title><style type=text/css>.ys{width:200px;height:200px;background:#900;color:white;text-align:center;float:left;margin-left:173px;margin-top:3px;
}.ys1{width:300px;height:200px;background:blue;float:left;margin-top:3px;margin-left:3px;
}.ys2{width:503px;height:150px;background:green;margin-left:173px;margin-top:3px;clear:both;margin-top:3px;}
#dh{width:950px;height:70px;background:grey;margin:0 auto;
}</style></head><body><div id="dh"></div><div class="ys">我们的世界</div><div class="ys1"></div><div class="ys2">博客的版权信息</div></html>
上为在IE中显示的效果，下为在火狐中的效果，
怎样解决在IE和火狐中兼容的问题，还有在.ys2的代码中设置了margin-top:3px;可为什么绿色的DIV层还是和上面红蓝色的紧贴在一起而没有3px的间隙，到底应该怎样解决呢 展开
}.ys1{width:300px;height:200px;background:blue;float:left;margin-top:3px;margin-left:3px;
}.ys2{width:503px;height:150px;background:green;margin-left:173px;margin-top:3px;clear:both;margin-top:3px;}
#dh{width:950px;height:70px;background:grey;margin:0 auto;
}</style></head><body><div id="dh"></div><div class="ys">我们的世界</div><div class="ys1"></div><div class="ys2">博客的版权信息</div></html>
上为在IE中显示的效果，下为在火狐中的效果，
怎样解决在IE和火狐中兼容的问题，还有在.ys2的代码中设置了margin-top:3px;可为什么绿色的DIV层还是和上面红蓝色的紧贴在一起而没有3px的间隙，到底应该怎样解决呢 展开
4个回答
展开全部
此为IE6的两倍外边距浮动BUG：当浮动元素设置了水平外边距时，与浮动方向相同的外边距在IE6中会出现双倍。
解决办法就是 为该浮动元素(即类名为ys的元素)设置行间显示：display:inline;
由于该元素为浮动元素，脱离文本流，故即使设置了行间显示，也不会影响它，所以display:inline;是最好的解决方法。
还有一个问题，就是你最后说的设置了上边距，但在标准浏览器没有这3px上边距的问题。
这是因为clear:both;
在标准浏览器中，浮动元素是脱离文本流的，所以文本流中的元素在设置外边距时，是忽略浮动元素的，即使设置了清除浮动clear:both;，也只是实现让浮动元素能够挤开旁边的非浮动元素。
即使如此，文本流中的元素(最后那个绿色的DIV)在设置上外边距时，还是忽略了浮动元素的存在，所以那个绿色DIV的margin-top是距离上边最近的一个非浮动元素，即第一个灰色的元素。
只有当你的上外边距超过中间那两个浮动元素的高度时，你才能看到间隙。
在IE6和IE7中，则最后那个绿色DIV的上边距，是距离中间那两个浮动元素的，所以你设置了3px，它们中间就会是3px间距。
解决办法是，给中间的浮动元素设置下外边距，将最后一个DIV外下推3px。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
您好！很高兴为您答疑！
这是IE6的两倍外边距浮动BUG：当浮动元素设置了水平外边距时，与浮动方向相同的外边距在IE6中会出现双倍。
解决办法就是 为该浮动元素(即类名为ys的元素)设置行间显示：display:inline;
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
这是IE6的两倍外边距浮动BUG：当浮动元素设置了水平外边距时，与浮动方向相同的外边距在IE6中会出现双倍。
解决办法就是 为该浮动元素(即类名为ys的元素)设置行间显示：display:inline;
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css</title>
<style type=text/css>
.ys{
width:200px;
height:200px;
background:#900;
color:white;
text-align:center;
float:left;
margin-top:3px;
}
.ys1{
width:300px;
height:200px;
background:blue;
float:left;
margin-top:3px;
margin-left:3px;
margin-bottom:3px;
}
.ys2{
width:503px;
height:150px;
background:green;
margin-top:3px;
clear:both;
margin-top:3px;
margin-bottom:3px;
}
#dh{
height:70px;
background:grey;
}
#container{
width:950px;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<div id="container">
<div id="dh"></div>
<div class="ys">我们的世界</div>
<div class="ys1"></div>
<div class="ys2">博客的版权信息</div>
</div>
</html>
帮你稍微改造了一下，有些地方还是很不合理，但是你的布局方式本身就有问题。多研究一下吧。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
考虑 找ie 不识别的 而火狐识别的字符 定义一下样式吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
