ie中偽類 hover的使用及bug

2021-07-26 11:51:06 字數 1874 閱讀 2201

:hover是我們在css設計中最常運用的偽類之一,許多絢麗效果的實現離不開偽類:hover,比如我們常見的純css選單、相簿效果等等。

或許用了這麼久的偽類:hover,還有部分朋友還不完全了解hover的規則:

quote:

在css1中此偽類僅可用於a物件。且對於無href屬性(特性)的a物件,此偽類不發生作用。

在css2中此偽類可以應用於任何物件。

但目前ie5.5、ie6僅支援css1中的:hover,不過新出的ie7是支援css2中的:hover。

當我們用偽類:hover做某些特殊效果時,依據css2很好完成,但為了現在佔據主流瀏覽器的ie6,我們又不得不做很多任務作,比如給新增a元素等來模擬完成最終的效果。

或許這樣講太空洞,請看下面乙個常見的觸發顯示的例子(

僅選擇ie6為例講解)。

我們先用css2的寫法來實現:

xhtml部分:

[copy to clipboard]

[ - ]code:

css部分:

[copy to clipboard]

[ - ]code:

*

ul

li

li a

li:hover a

演示效果:

可我們發現上例中的效果,在ie6中依然無法顯示,難道我們的**寫錯了,可檢查來檢查去一點錯誤也沒有(不信你找個高高手問問,他們依然會回答你,這**完全正確),難道是標準中的說明是錯的?還是ie6瀏覽器連css1也不支援?很多疑問從四面八方跑來了……

那到底是什麼問題呢?

不是標準說明的錯,也不是ie瀏覽器不支援css1,而是ie瀏覽器自身解析的問題,是ie5.5和ie6中偽類:hover的bug。

那又該如何解決這個問題呢?

這個bug可以通過在鏈結的屬性中增加某些特殊的css屬性宣告來消除。

下面我們對上面的第二個例子進行實驗,究竟哪些屬性可以幫我們來消除這些bug。

對css**我們增加:

[copy to clipboard]

[ - ]code:

li a:hover {}

對其屬性我們僅設定width:100px;發現在ie6中依舊沒有變化,我們嘗試著更改width的value,比如使其width:99px,奇怪的事情發生了,在ie6中,隱藏的部分在觸發的時候顯示出來了。我們再對li a:hover的屬性僅設定color來測試(初始值為#fff),更改color值,發現在ie6下卻也不能觸發顯示,奇怪,奇怪,真奇怪……是不是依舊是一頭霧水……沒關係,繼續往下實驗,或許歸類了我們就能發現規律了!

我們再用其他屬性進行設定:width,positon,background,text-decoration,font-size,font-weight,font-family,border,float,display,font-style,margin,padding,text-align,overflow,text-transform,text-indent,z-index,vertical-align。

我們發現除了text-decoration,color,z-index不能觸發顯示(對於不能觸發顯示的部分,可以還有某些遺漏的屬性,歡迎朋友補充)外,其他屬性均可以做為消除偽類:hover bug的特定屬性。

說明:

1、對於dispaly不可以用本例來測試,可另外寫個更簡單的例子(去除ul/li,a和span中的position)。在實際應用中懌飛不建議改變display值來做為特定屬性消除此bug,而且在某些例子中此屬性不一定能消除bug。

2、對於做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變,如#fff和#ffffff在消除bug中解析為2個不同的值。

最終效果:

IE中偽類 hover的使用及BUG

hover 是我們在 css 設計中最常運用的偽類之一,許多絢麗效果的實現離不開偽類 hover,比如我們常見的純 css 選單 相簿效果等等。或許用了這麼久的偽類 hover,還有部分朋友還不完全了解 hover 的規則 在 css1 中此偽類僅可用於 a 物件。且對於無 href 屬性 特性 的...

IE中偽類hover的使用 BUG及解決方法

偽類 hover的規則 在css1中,此偽類僅可用於a物件。且對於無href屬性的a物件,此偽類不發生作用 在css2中,此偽類可以應用於任何物件 目前ie5.5 ie6僅支援css1中的 hover,不過新出的ie7以及firefox支援css2中的 hover。先用css2的寫法來實現 如不能顯...

IE6中偽類 hover的使用及BUG

以前未曾遇到類似的問題,一番google,才知道這是ie6處理css偽類 hover的bug。例如如下的 網 淘你喜歡 在ie7 ff中,滑鼠移動到鏈結上時,淘你喜歡 字樣會變為紅色,但ie6則無反應。所以ie6的bug就是如果a 與 a hover 的css定義是一樣的,也就是說如果a hover...