IE6的Bug: 绝对定位遇到浮动后消失
昨天寫CSS的時候，這個問題讓我糾結(jié)了兩三個小時，雖然經(jīng)歷過不少IE6對CSS的不堪目睹的表現(xiàn)，但這次就太讓人摸不到頭腦了，好在有很多人都曾經(jīng)遇到過這個問題，整理一下貼在這里。
問題表現(xiàn)：“content” 標(biāo)簽的寬度為600px，內(nèi)包含三個Div標(biāo)簽，分別為“time”、 “date”、“title”，其中除“time”是絕對定位屬性之外都有一個浮動屬性，在除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: 絕對定位遇到浮動后消失</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ù)覽：
讓絕對定位元素不緊挨著浮動元素即可，比如在“time”后添加一個空白標(biāo)簽
<div></div>；或者把“time”用一個div標(biāo)簽包含起來；或者把“date”和“title”用一個div標(biāo)簽包含起來，問題即可解決。
PS：IE6的市場占有份額雖然正在縮減，但好多人還在固守著它啊，期待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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ES 基础
- 下一篇： 学生管理系统stuSystem函数