FireFox正常 IE錯位的絕對定位元素

IE 一如既往地帶來問題。真的，我覺得 IE 堅持自己的一套無所謂，不支持或者不完全支持標準也無所謂。但是，IE6 IE7 IE8 這三個版本都有各自不同的表現，實在是太讓人難受了。
前兩天碰到了這個奇怪的問題：
絕對定位的元素，緊鄰著兩個浮動元素。Firefox 中一切正常，IE6 中絕對定位元素消失了。
解決方法：只要別讓絕對定位元素緊鄰浮動元素就可以了。比如可以在絕對定位元素后面加個空元素。當然，這個空元素是毫無意義的，但是，在 IE 面前，又能怎么樣呢？

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

另外，這個 demo 里面也存在 IE6 的另一個經典 bug : 由注釋產生的表現不同。(唉，bug 都成經典了，IE 無敵啊。
請看上面的圖中，上面那塊，就是有注釋的，下面那塊是去掉注釋的，可以明顯的看到底部的白色空白高度是不同的。
【FireFox正常 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 titleTemplate/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!-- .absolute -- div/div div class="main" 浮動元素 /div!-- .main -- div class="sub" 浮動元素 /div!-- .sub -- /div!-- .content -- 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!-- .wrap -- /body /html
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode1 .value = https://www.questions.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行