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

  1. 首頁 > 云知道 > >

ie下的css層疊z-index各種問題詳細整理( 三 )

云知道


ie下的css層疊z-index各種問題詳細整理


為具有 relative 屬性的頂級祖先元素打了雞血(加了z-index)后 ， IE6下終于正常顯示了 。這個問題很現(xiàn)實的教育了我們 - 在拼爹拼不過的條件下我們只能靠自己努力...
IE6下拼爹的問題也就是我在實際開發(fā)中碰到的問題 ， 現(xiàn)在已經(jīng)完美解決且達到需求的效果了 。接下來要介紹的是一些我總結(jié)的資料 ， 都是介紹在IE環(huán)境下得各種z-index的坑 。
2.萬惡的float
float 是 css 的定位屬性 ， 而且應(yīng)該是CSS中最常用的屬性之一了 ， 至于為什么說它萬惡等我改天去準(zhǔn)備一篇文章單獨進行解說 ， 在這里借著以前的學(xué)習(xí)筆記簡單說幾點：
1. IE7 中 ， 底邊距 bug是當(dāng)浮動父元素有浮動子元素時 ， 這些子元素的底邊距會被父元素忽略掉；
2.3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素 ， 好像浮動元素的周圍有一個奇怪的力場一樣；
3.雙倍邊距bug處理 IE6 時 ， 另一個需要記住的事情是 ， 如果在和浮動方向相同的方向上設(shè)置外邊距(margin) ， 會引發(fā)雙倍邊距 。
有關(guān)float的掃盲就先到這里 ， 還有一點就是float畢竟是標(biāo)準(zhǔn)的屬性 ， 而且大多數(shù)的前端都習(xí)慣用它去實現(xiàn)頁面 ， 所以我的建議就是：深入理解 HTML語義和表現(xiàn) 。
接著開始講述 z-index和float 在IE6環(huán)境下擦出的坑爹的火花...先上一段代碼：

復(fù)制代碼代碼如下:
div style="background:#000;width:100%;height:600px;opacity:0.3; filter:alpha(opacity=30);position:absolute;left:0;top:0;z-index:1;overflow:hidden;"/div
div style="position:relative;z-index:100;"
img src="/images/defaultpic.gif" /
/div

看到img有設(shè)置float屬性 ， 上面這段代碼顯示的效果與IE6下拼爹失敗一樣 ， IE6下的犀牛書是灰色的 T.T。為了讓犀牛書正常顯示 ， 只需要把img的float屬性去掉即可 。個人理解可能是因為img的float使得z-index失效造成的 。網(wǎng)上還有種說法是因為float和relative兩者在定位上問題 ， 所以一起使用的時候會造成此bug 。
這個問題又教育了我們 - 某些環(huán)境(IE6)下也要小心被兄弟坑...
IE6下 select z-index無效而遮擋div
這個問題其實在是比較常見的了 ， 我早期做項目的時候有幸遇見過這個問題 ， 所以有現(xiàn)成的資料 ， 趁著這次也剛好整理整理、回憶回憶 。兩個解決辦法都是圍繞iframe展開的 ， 咱們先來看第一個 。
1.用 iframe 包裹 select 元素
使用iframe包住select ， 這樣iframe可以有z-index ， 只要在div上設(shè)置的z-index比iframe的高即可實現(xiàn) 。示例代碼如下：

復(fù)制代碼代碼如下:
iframe style="z-index:1;position: absolute; "
select name="me"
option value="https://www.rkxy.com.cn/dnjc/name"Darren聶微東/option
option value="https://www.rkxy.com.cn/dnjc/sex"male/option
option value="https://www.rkxy.com.cn/dnjc/age"secret/option
/select
/iframe

2.以 Iframe 作為div的子元素 ， 覆蓋 select 元素(推薦使用)
建立一個跟div同寬同高的iframe ， 并且z-index比div要低 。

復(fù)制代碼代碼如下:
style type="text/css"
#iframe{
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
}
.text_div{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
/style
div class="text_div"
span這里可以包含其他dom元素/span
iframe id="iframe"/iframe
/div
注:在這里如果不加src屬性,盡管iframe會把select擋住,但是由于默認iframe為白色,會影響原來的div背景色 。解決方法可以加了一個空的HTML文件 ， 并把body 的值設(shè)為和原來div背景色一致,這樣就解決了默認白色背景色的問題 ， 這里只是一種思路 ， 辦法總比困難多^_^ 。本文結(jié)語

推薦閱讀