當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

IE6的Bug: 绝对定位遇到浮动后消失

發(fā)布時(shí)間：2023/12/18 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 IE6的Bug: 绝对定位遇到浮动后消失小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

昨天寫CSS的時(shí)候，這個(gè)問題讓我糾結(jié)了兩三個(gè)小時(shí)，雖然經(jīng)歷過不少IE6對(duì)CSS的不堪目睹的表現(xiàn)，但這次就太讓人摸不到頭腦了，好在有很多人都曾經(jīng)遇到過這個(gè)問題，整理一下貼在這里。

問題表現(xiàn)：“content” 標(biāo)簽的寬度為600px，內(nèi)包含三個(gè)Div標(biāo)簽，分別為“time”、 “date”、“title”，其中除“time”是絕對(duì)定位屬性之外都有一個(gè)浮動(dòng)屬性，在除IE6之外的瀏覽器上表現(xiàn)都很正常，但是在IE6下詭異的事情就發(fā)生了，“time”元素竟然消失了！

▲ 非IE6瀏覽器中表現(xiàn)正常

原始代碼預(yù)覽：

1 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>IE6Bug: 絕對(duì)定位遇到浮動(dòng)后消失</title> 5 <style> 6 body{ padding:0;margin:0;font-family: 'microsoft yahei'; } 7 .content{ position:relative;width:600px;height:30px;margin:20px 0 0 80px;line-height:30px;text-indent:5px; } 8 .time{ position:absolute;left:-50px;top:0;width:50px;height:30px;background:#1f3a87; } 9 .date{ float:left;width:300px;height:30px;background:#f3f3f3; } 10 .title{ float:left;width:300px;height:30px;background:#bc2931; } 11 </style> 12 </head> 13 14 <body> 15 <div class="content"> 16 <div class="time"> 17 time 18 </div> 19 <div class="date"> 20 date 21 </div> 22 <div class="title"> 23 title 24 </div> 25 </div> 26 </body> 27 </html>

昨天雖然嘗試了幾種方法：讓“date”+“title”的寬度大于或小于“content”的寬度；給“content”添加 “display:inline;”；去掉“date”或“title”的float屬性等，這些方法雖也能讓“time”出現(xiàn)，但顯然不是想要的效果，綜合查詢到的資料下面是具體的解決方法。

解決方法 預(yù)覽：

讓絕對(duì)定位元素不緊挨著浮動(dòng)元素即可，比如在“time”后添加一個(gè)空白標(biāo)簽

；或者把“time”用一個(gè)div標(biāo)簽包含起來；或者把“date”和“title”用一個(gè)div標(biāo)簽包含起來，問題即可解決。

PS：IE6的市場(chǎng)占有份額雖然正在縮減，但好多人還在固守著它啊，期待IE6完全消失的那一天吧！

轉(zhuǎn)自：http://www.badmilk.com.cn/blog/archives/ie6-absolute-float-bug.html#227782-tqq-1-72529-91a0a1fd5d017a390c15188f5ae820cc

轉(zhuǎn)載于:https://www.cnblogs.com/Aray/archive/2012/04/10/2441531.html

總結(jié)

以上是生活随笔為你收集整理的IE6的Bug: 绝对定位遇到浮动后消失的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。