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

  1. 首頁 > 云知道 > >

IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問題解決方法匯總( 四 )

云知道


有一定經(jīng)驗的人可能都知道上面的事實 。但是，相信這里面很多人不知道IE6下，決定層級高低的不是當(dāng)前的父標(biāo)簽，而是整 個DOM tree（節(jié)點樹）的第一個relative屬性的父標(biāo)簽 。有時平時我們多處理一個父標(biāo)簽，z-index層級多而復(fù)雜的情況不多見，所以難免會有認(rèn)識上 的小小偏差 。
好，下面展示這個bug 。
條件很簡單，只要絕對定位的第一個元素的第一個爸爸，或者說是最老的那個爸爸級別的人的relative屬性小于黑色半 透明層的z-index層級 。例如下面的HTML代碼：

復(fù)制代碼代碼如下:
div/div
div style="position:relative;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

可以看到，mm3圖片的父標(biāo)簽div 是絕對定位，層級9999，比1大多了，絕對定位的父標(biāo)簽層級1000(10000也一樣)，也比黑色半透明層的z-index:1大多了，但是，我們可 憐的IE6童鞋
再看看以Firefox為代表的其他童鞋：
IE7與IE6有著同樣的bug，原因很簡單，雖然圖片所在div當(dāng)前的老爸層級很高(1000)，但是由于老爸的老爸 不頂用，可憐了9999如此強勢的孩子沒有出頭之日?。?
知道原因解決就很輕松了，給第一任老爸添加z-index后的HTML代 碼如下：

復(fù)制代碼代碼如下:
div/div
div style="position:relative; z-index:1;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

結(jié)果IE6童鞋喜笑顏開，春光燦爛：
19：css reset中的list-style:none
在IE6,7下,當(dāng)UL不具有float:left;display:inline;時:無論有沒有l(wèi)ist-style:none這個屬性,列 表符都被隱藏,不占位置(下面代碼中的5,6)當(dāng)UL具有float:left;display:inline;屬性時list- style:none,列表符被隱藏,但是仍然留有位置(list-style-position:inside);未 設(shè)置list-style:none;列表符被隱藏,也不占位(list-style-position:outside)在firefox中只要list-style-type為none ,則 無論list-stype-position的值為outside或inside , list-style都能很好的被隱藏而在IE6,7中,僅 設(shè)置list-style:none,并不足以解決所有問題所以我認(rèn)為在css reset的時候使用 list-style:none outside none 更好
20：鏈接去邊線（完全兼容）

復(fù)制代碼代碼如下:
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 額外產(chǎn)生的6PX 或者4px margin
今天在做一個Timeline的模塊的時候遇到一個棘手的問題： 給元素添加display:inline-block 屬性的時候會產(chǎn)生額外的4px的margin-right 。
原始代碼

復(fù)制代碼代碼如下:
.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;
background-color:#00FF00;
position:relative;
}

頁面渲染結(jié)果：
每一列都會向右產(chǎn)生外邊距4px，苦思不得其解，嘗試負(fù)的外邊距，但是涉及到其他的問題:每個li標(biāo)簽會重疊1-2個px，妨礙到鼠標(biāo)hover狀 態(tài)的事件 。嘗試修改doctype類型也不見效果 。后來嘗試了另外一個方法：把原來的HTML 代碼結(jié)構(gòu)：更改為：這樣就不會產(chǎn)生額外的外邊距，也弄不清楚為什么會出現(xiàn)這種問題 。先暫時記下，以后再研究研究 。
22: IE6中偽類:hover的使用及BUG
以前未曾遇到類似的問題，一番google，才知道這是IE6處理CSS偽類:hover的Bug 。例如如下的代碼：

復(fù)制代碼代碼如下:
style
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
/style
a href=http://www.taobao.com 淘寶網(wǎng) span 淘你喜歡 /span/a

推薦閱讀