絕對(duì)定位的元素在ie6下不顯示隱藏了的有效解決方法
發(fā)布時(shí)間：2014-06-05 16:21:40 作者：佚名 
我要評(píng)論
我要評(píng)論當(dāng)絕對(duì)定位元素的鄰近浮動(dòng)元素的寬度大于父層寬度減3時(shí)，該絕對(duì)定位元素在ie6下面會(huì)隱藏，解決方法就是調(diào)整浮動(dòng)元素的寬度，即寬度小于或等于父層寬度減3
問(wèn)題描述：
在 ie6 中如果一個(gè)浮動(dòng)元素與絕對(duì)定位元素相鄰的話，在某些情況下絕對(duì)定位元素將會(huì)消失。
產(chǎn)生原因：
只有當(dāng)絕對(duì)定位元素的鄰近浮動(dòng)元素的寬度大于父層寬度減 3 時(shí)（即如果父層寬度是 300px，浮動(dòng)元素的寬度大于 297px），該絕對(duì)定位元素在 ie6 下面會(huì)隱藏。
html：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>絕對(duì)定位的元素在ie6下不顯示</title>
</head>
<body>
<div class="w">
<div class="fl">浮動(dòng)元素</div>
<div class="pa">絕對(duì)定位元素</div>
</div>
</body>
</html>
css：
.w{border:3px solid #000;color:#fff;height:200px;position:relative;width:300px;}
.pa{background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}
.fl{background:gray;float:left;height:100px;width:100%;}
ie6 瀏覽器效果：
其他瀏覽器效果：
解決方法：
1、調(diào)整浮動(dòng)元素的寬度，即寬度小于或等于父層寬度減 3；
2、在浮動(dòng)元素與絕對(duì)定位元素之間添加一個(gè)空的 div（推薦）。
還是以上面的實(shí)例為參考：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>絕對(duì)定位的元素在ie6下不顯示</title>
</head>
<body>
<div class="w">
<div class="fl">浮動(dòng)元素</div>
<div></div>
<div class="pa">絕對(duì)定位元素</div>
</div>
</body>
</html>
ie6 瀏覽器和其他瀏覽器效果：
在 ie6 中如果一個(gè)浮動(dòng)元素與絕對(duì)定位元素相鄰的話，在某些情況下絕對(duì)定位元素將會(huì)消失。
產(chǎn)生原因：
只有當(dāng)絕對(duì)定位元素的鄰近浮動(dòng)元素的寬度大于父層寬度減 3 時(shí)（即如果父層寬度是 300px，浮動(dòng)元素的寬度大于 297px），該絕對(duì)定位元素在 ie6 下面會(huì)隱藏。
html：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>絕對(duì)定位的元素在ie6下不顯示</title>
</head>
<body>
<div class="w">
<div class="fl">浮動(dòng)元素</div>
<div class="pa">絕對(duì)定位元素</div>
</div>
</body>
</html>
css：
復(fù)制代碼
代碼如下:.w{border:3px solid #000;color:#fff;height:200px;position:relative;width:300px;}
.pa{background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}
.fl{background:gray;float:left;height:100px;width:100%;}
ie6 瀏覽器效果：
其他瀏覽器效果：
解決方法：
1、調(diào)整浮動(dòng)元素的寬度，即寬度小于或等于父層寬度減 3；
2、在浮動(dòng)元素與絕對(duì)定位元素之間添加一個(gè)空的 div（推薦）。
還是以上面的實(shí)例為參考：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>絕對(duì)定位的元素在ie6下不顯示</title>
</head>
<body>
<div class="w">
<div class="fl">浮動(dòng)元素</div>
<div></div>
<div class="pa">絕對(duì)定位元素</div>
</div>
</body>
</html>
ie6 瀏覽器和其他瀏覽器效果：
相關(guān)文章
- 這篇文章主要為大家介紹了絕對(duì)定位元素被遮擋的解決方法,涉及使用css絕對(duì)定位的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-13
CSS絕對(duì)定位元素left設(shè)為50%實(shí)現(xiàn)水平居中
絕對(duì)定位的元素left設(shè)為50%時(shí)，是已左上角為原點(diǎn)的，所以只要再使用margin屬性添加負(fù)值補(bǔ)償回來(lái)即可，下面示例代碼，需要的朋友可以參考下2014-09-04IE7中絕對(duì)定位元素之間的遮蓋問(wèn)題示例探討
設(shè)置絕地定位的元素必須設(shè)置兩個(gè)相對(duì)定位的元素，也就是小A的紅色框框，和小C的藍(lán)色框框，設(shè)置他們的層級(jí)關(guān)系，下面有個(gè)示例，大家可以參考下2014-03-31將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27- 本文主要介紹了css的絕對(duì)定位的使用方法，大家參考使用吧2014-01-27
- 下面小編就為大家?guī)?lái)一篇有關(guān)絕對(duì)定位的全面理解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-20