標簽： ie6 兼容 position relative 觸發(fā)layout it

分類(lèi)： 和工作有關(guān)

今天上班在地鐵里手機上網(wǎng)讀到一篇文章，題目是：

【轉發(fā)】頁(yè)面前端的水有多深？再議頁(yè)面開(kāi)發(fā)

好吧，我承認只能看看此類(lèi)的文章了。游戲不感興趣，JS又看不懂。

很認同里面的某些觀(guān)點(diǎn)，比方說(shuō)，不要濫用css hack:

"很多同學(xué)在頁(yè)面開(kāi)發(fā)時(shí)上網(wǎng)搜索最多的就是hack了，是否我們完全要依賴(lài)hack來(lái)實(shí)現頁(yè)面兼容性，答案是否定的。大家經(jīng)常比喻IE6向我們撒了一個(gè)謊，結果我們要再撒一百個(gè)謊來(lái)圓這個(gè)謊。不否認IE6經(jīng)常讓我們口吐鮮血，但不代表我們用更多的“謊言”來(lái)彌補就可以心安理得。大部分情況下可以通過(guò)變換思路調整HTML結構，或使用一些雖然無(wú)法解釋但相對安全的css來(lái)干掉hack。誰(shuí)都無(wú)法預計使用hack什么時(shí)候會(huì )讓我們栽一個(gè)大跟頭。比如使用觸發(fā)layout或position:relative就可以幫助解決很多IE6的問(wèn)題。"

的確，如果發(fā)生不兼容的問(wèn)題，首先查看一下代碼或者結構是否能另辟蹊徑。實(shí)際上，IE6也沒(méi)有傳說(shuō)中的那么差勁，時(shí)間長(cháng)了，就能摸透它的脾氣了。

當時(shí)將重點(diǎn)放在了最后一句。以前只知道觸發(fā)layout。比方說(shuō)用zoom:1之類(lèi)的。position:relative還真沒(méi)有接觸過(guò)。我在心里琢磨著(zhù)。心里想著(zhù)要不要專(zhuān)門(mén)測試一下，然后再寫(xiě)一篇有關(guān)于此的東西。

上午干活，發(fā)現了一個(gè)兼容問(wèn)題，百思不得其解，迷茫之中想到了這里，嘗試，管用！

算是心想事成嗎？

案例如下：

前兩個(gè)圖標是用A標簽寫(xiě)的，為了實(shí)現鼠標上移后的背景提亮效果。

“分享”是一個(gè)層，相對于它們共同的父級定位。

問(wèn)題：在IE6下層不顯示。z-index不起作用。

辦法：為前面的兩個(gè)A標簽加上position:relative屬性。同時(shí)將位置移到兩個(gè)圖標前面。

真是越來(lái)越喜歡IE6了。倘若有一天它逝去了，我等人員豈不少了很多樂(lè )趣？