Css教程:FireFox正常IE錯位的絕對定位元素

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> Css教程:FireFox正常IE錯位的絕對定位元素

編輯：CSS進階教程

網頁制作poluoluo文章簡介：絕對定位的元素，緊鄰著兩個浮動元素。Firefox 中一切正常，IE6 中絕對定位元素消失了.

IE 一如既往地帶來問題。真的，我覺得 IE 堅持自己的一套無所謂，不支持或者不完全支持標准也無所謂。但是，IE6 IE7 IE8 這三個版本都有各自不同的表現，實在是太讓人難受了。

前兩天碰到了這個奇怪的問題：

絕對定位的元素，緊鄰著兩個浮動元素。Firefox 中一切正常，IE6 中絕對定位元素消失了。

解決方法：只要別讓絕對定位元素緊鄰浮動元素就可以了。比如可以在絕對定位元素後面加個空元素。當然，這個空元素是毫無意義的，但是，在 IE 面前，又能怎麼樣呢？

demo1

經過實驗，我發現，只要浮動元素的寬度不填滿父元素，絕對定位元素就能正常顯示，一旦浮動元素的寬度填滿父元素，絕對定位元素就會消失。而且，看來，父元素寬度是這種情況發生的臨界點。

demo2

另外，這個 demo 裡面也存在 IE6 的另一個經典 bug : 由注釋產生的表現不同。(唉，bug 都成經典了，IE 無敵啊。

請看上面的圖中，上面那塊，就是有注釋的，下面那塊是去掉注釋的，可以明顯的看到底部的白色空白高度是不同的。

看具體演示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> /*common*/ *{margin:0;padding:0;list-style:none;} select,input{font-size:12px;} img{border:0;display:block;margin:0 auto;} a{color:#333;text-decoration:none;} a:hover{color:#c42805;text-decoration:underline;} em{font-style:normal;color:#c42805;} em a{color:#c42805;} body{font-size:12px;color:#333;font-family:Arial,"宋體";background-color:#9c9c9c;} .clear{clear:both;} /*wrap*/ .wrap{padding:20px 0;} p{text-align:center;font-size:14px;font-weight:bold;} /*content*/ .content{width:480px;margin:20px auto;background-color:#fff;padding:10px;overflow:hidden;position:relative;} .absolute{width:280px;background-color:#ddd;padding:10px;text-align:center;position:absolute;right:5px;top:5px;} .main,.sub{float:left;width:240px;height:150px;line-height:150px;text-align:center;} .main{background-color:#ccc;} .sub{background-color:#c2c2c2;} .mainsub{float:left;width:480px;text-align:center;height:150px;line-height:150px;background-color:#ccc;} </style> <title>Template</title> </head> <body> <div class="wrap"> <p>修正前</p> <div class="content"> <div class="absolute"> 絕對定位元素 </div> <div class="main"> 浮動元素 </div> <div class="sub"> 浮動元素 </div> </div> <p>修正後</p> <div class="content"> <div class="absolute"> 絕對定位元素 </div> <div></div> <div class="main"> 浮動元素 </div> <div class="sub"> 浮動元素 </div> </div> <p>浮動元素寬度小於父元素</p> <div class="content"> <div class="absolute"> 絕對定位元素 </div> <div class="main"> 浮動元素 </div> </div> <p>浮動元素寬度大於或等於父元素</p> <div class="content"> <div class="absolute"> 絕對定位元素 </div> <div class="mainsub"> 浮動元素 </div> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:CSS教程:CSS制作3D立方體
下一頁:CSS對IE6、IE7、IE8支持詳細的易用的參考

CSS進階教程

總結：用CSS進行網頁樣式設計攻略全集: 　一.使用css縮寫　　使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規則
CSS教程:語義化標記拋棄DIV標記: 網頁制作poluoluo文章簡介：復雜的網頁設計需要大量不同的標簽結構代碼，我們把它叫做“div-s
下拉菜單做翻頁的通用代碼: 其實這個代碼就是老外的那個翻頁插件，後來是哪位好朋友（不好意思，忘了）修改後放在論壇上的，我還做成

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章