日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

FireFox正常 IE錯(cuò)位的絕對(duì)定位元素

云知道

IE 一如既往地帶來(lái)問(wèn)題 。真的，我覺(jué)得 IE 堅(jiān)持自己的一套無(wú)所謂，不支持或者不完全支持標(biāo)準(zhǔn)也無(wú)所謂 。但是，IE6 IE7 IE8 這三個(gè)版本都有各自不同的表現(xiàn)，實(shí)在是太讓人難受了 。
前兩天碰到了這個(gè)奇怪的問(wèn)題：
絕對(duì)定位的元素，緊鄰著兩個(gè)浮動(dòng)元素 。Firefox 中一切正常，IE6 中絕對(duì)定位元素消失了 。
解決方法：只要?jiǎng)e讓絕對(duì)定位元素緊鄰浮動(dòng)元素就可以了 。比如可以在絕對(duì)定位元素后面加個(gè)空元素 。當(dāng)然，這個(gè)空元素是毫無(wú)意義的，但是，在 IE 面前，又能怎么樣呢？

FireFox正常 IE錯(cuò)位的絕對(duì)定位元素

經(jīng)過(guò)實(shí)驗(yàn)，我發(fā)現(xiàn)，只要浮動(dòng)元素的寬度不填滿父元素，絕對(duì)定位元素就能正常顯示，一旦浮動(dòng)元素的寬度填滿父元素，絕對(duì)定位元素就會(huì)消失 。而且，看來(lái)，父元素寬度是這種情況發(fā)生的臨界點(diǎn) 。
FireFox正常 IE錯(cuò)位的絕對(duì)定位元素

另外，這個(gè) demo 里面也存在 IE6 的另一個(gè)經(jīng)典 bug : 由注釋產(chǎn)生的表現(xiàn)不同 。(唉，bug 都成經(jīng)典了，IE 無(wú)敵啊 。
請(qǐng)看上面的圖中，上面那塊，就是有注釋的，下面那塊是去掉注釋的，可以明顯的看到底部的白色空白高度是不同的 。
【FireFox正常 IE錯(cuò)位的絕對(duì)定位元素】看具體演示效果：


!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" 絕對(duì)定位元素 /div div class="main" 浮動(dòng)元素 /div div class="sub" 浮動(dòng)元素 /div /div p修正后/p div class="content" div class="absolute" 絕對(duì)定位元素 /div!-- .absolute -- div/div div class="main" 浮動(dòng)元素 /div!-- .main -- div class="sub" 浮動(dòng)元素 /div!-- .sub -- /div!-- .content -- p浮動(dòng)元素寬度小于父元素/p div class="content" div class="absolute" 絕對(duì)定位元素 /div div class="main" 浮動(dòng)元素 /div /div p浮動(dòng)元素寬度大于或等于父元素/p div class="content" div class="absolute" 絕對(duì)定位元素 /div div class="mainsub" 浮動(dòng)元素 /div /div /div!-- .wrap -- /body /html
ffcod = delpost.runcode1 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode1 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運(yùn)行

    推薦閱讀