IE6上 设置float后div错位的有关问题
日期：2014-05-17 浏览次数：20647 次
IE6下 设置float后div错位的问题
IE6下div#center和div#right错位成两行了，其他Firefox等没有问题。
奇怪的是，div#center width 设置成700就可以了。
请问这是怎么回事，谢谢！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Chapter 3 Project</title>
<style type="text/css">
#main{
border: 1px solid black;
width: 950px;
margin: 0; padding: 0;
}
#center{
border: 1px solid red;
width: 710px;
margin: 0; padding: 0;
margin-right: 240px;
}
#right{
border: 1px solid blue;
float: right;
width: 50px;
margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="main">
<div id="right">
<p>right</p>
</div>
<div id="center">
<p>center</p>
</div>
</div>
</body>
</html>
------解决方案--------------------
兄弟，别搞IE6了，都什么年代了！
他老爹（微软）都不要他了，中国人还死抱着不放！
搞IE6，就不能搞web2.0。去年（2011年）给以老外做网站，人家直接提出：“不考虑IE6和IE7”！
web2.0和IE6、7，老外的选择都是web2.0；真不明白国人是怎么了。
作为web designer，有义务引导大家向更好的方向发展，而不是一味顺从！
http://www.showweb.co/
http://www.colorelf.com/
这两个都是我这两天新做的网站，给自己做的！都没做IE测试，但是我想IE8以上都不会有什么问题！
http://www.showweb.co/ 请大家帮忙顶顶！专门针对网页设计师的网站！大家只要把自己设计
的作品打成压缩包（首页必须是index.html），上传，就能在线展示了！而且还能绑定域名--免费的！
------解决方案--------------------
width 710 加上margin-right 240 再加上border已经超过950了
再加上IE6下面会有几个像素的差距，你宽度设成704就好了，
或者你直接把center的margin-right给去掉，在你这种情况下设了宽度就没必要margin-right了
------解决方案--------------------
原因：ie6下 有个布局的概念 ，你这个问题是 ie6bug，你给right添加了 float属性，那么这个div就有布局了，他呈现的是个块，会阻止其他的元素浮动在他的周围。在firefox浏览器下 ，就没有这个影响，因为浮动的元素是脱离了文档流，不再占居原来的空间了，所以不妨碍center的位置。
IE6下div#center和div#right错位成两行了，其他Firefox等没有问题。
奇怪的是，div#center width 设置成700就可以了。
请问这是怎么回事，谢谢！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Chapter 3 Project</title>
<style type="text/css">
#main{
border: 1px solid black;
width: 950px;
margin: 0; padding: 0;
}
#center{
border: 1px solid red;
width: 710px;
margin: 0; padding: 0;
margin-right: 240px;
}
#right{
border: 1px solid blue;
float: right;
width: 50px;
margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="main">
<div id="right">
<p>right</p>
</div>
<div id="center">
<p>center</p>
</div>
</div>
</body>
</html>
------解决方案--------------------
兄弟，别搞IE6了，都什么年代了！
他老爹（微软）都不要他了，中国人还死抱着不放！
搞IE6，就不能搞web2.0。去年（2011年）给以老外做网站，人家直接提出：“不考虑IE6和IE7”！
web2.0和IE6、7，老外的选择都是web2.0；真不明白国人是怎么了。
作为web designer，有义务引导大家向更好的方向发展，而不是一味顺从！
http://www.showweb.co/
http://www.colorelf.com/
这两个都是我这两天新做的网站，给自己做的！都没做IE测试，但是我想IE8以上都不会有什么问题！
http://www.showweb.co/ 请大家帮忙顶顶！专门针对网页设计师的网站！大家只要把自己设计
的作品打成压缩包（首页必须是index.html），上传，就能在线展示了！而且还能绑定域名--免费的！
------解决方案--------------------
width 710 加上margin-right 240 再加上border已经超过950了
再加上IE6下面会有几个像素的差距，你宽度设成704就好了，
或者你直接把center的margin-right给去掉，在你这种情况下设了宽度就没必要margin-right了
------解决方案--------------------
原因：ie6下 有个布局的概念 ，你这个问题是 ie6bug，你给right添加了 float属性，那么这个div就有布局了，他呈现的是个块，会阻止其他的元素浮动在他的周围。在firefox浏览器下 ，就没有这个影响，因为浮动的元素是脱离了文档流，不再占居原来的空间了，所以不妨碍center的位置。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
