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>
這個是對的。主要是 你忽略了 border 的 2個像素的寬度了
奇怪的是，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>
5 个解决方案
#1
兄弟，別搞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），上傳，就能在線展示了！而且還能綁定域名--免費的！
他老爹（微軟）都不要他了，中國人還死抱着不放！
搞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），上傳，就能在線展示了！而且還能綁定域名--免費的！
#2
width 710 加上margin-right 240 再加上border已經超過950了
再加上IE6下面會有幾個像素的差距，你寬度設成704就好了，
或者你直接把center的margin-right給去掉，在你這種情況下設了寬度就沒必要margin-right了
再加上IE6下面會有幾個像素的差距，你寬度設成704就好了，
或者你直接把center的margin-right給去掉，在你這種情況下設了寬度就沒必要margin-right了
#3
原因：ie6下 有個布局的概念 ，你這個問題是 ie6bug，你給right添加了 float屬性，那么這個div就有布局了，他呈現的是個塊，會阻止其他的元素浮動在他的周圍。在firefox瀏覽器下 ，就沒有這個影響，因為浮動的元素是脫離了文檔流，不再占居原來的空間了，所以不妨礙center的位置。
#4
謝謝各位，結貼了。
測試IE6也是沒有辦法的事。
測試IE6也是沒有辦法的事。
#5
這個是對的。主要是 你忽略了 border 的 2個像素的寬度了
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。