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>


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),上傳,就能在線展示了!而且還能綁定域名--免費的!

#2


width 710 加上margin-right 240 再加上border已經超過950了
再加上IE6下面會有幾個像素的差距,你寬度設成704就好了,
或者你直接把center的margin-right給去掉,在你這種情況下設了寬度就沒必要margin-right了

#3


原因:ie6下  有個布局的概念 ,你這個問題是 ie6bug,你給right添加了 float屬性,那么這個div就有布局了,他呈現的是個塊,會阻止其他的元素浮動在他的周圍。在firefox瀏覽器下 ,就沒有這個影響,因為浮動的元素是脫離了文檔流,不再占居原來的空間了,所以不妨礙center的位置。

#4


謝謝各位,結貼了。
測試IE6也是沒有辦法的事。

#5


引用 2 樓 dencey 的回復:
width 710 加上margin-right 240 再加上border已經超過950了
再加上IE6下面會有幾個像素的差距,你寬度設成704就好了,
或者你直接把center的margin-right給去掉,在你這種情況下設了寬度就沒必要margin-right了

這個是對的。主要是 你忽略了 border 的 2個像素的寬度了

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com