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