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

2021-09-02 13:19:03 字數 2069 閱讀 5300

偽類:hover的規則:

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

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

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

先用css2的寫法來實現:

如不能顯示效果,請按ctrl+f5重新整理本頁,更多網頁**:

大家可以測試發現在firefox等對css2支援很好的瀏覽器中,可以顯示我們所要達到的效果,但在ie6中卻無法實現。

下面讓我們換一種思維,使用css1的寫法來看看:

在css1中,由於無法支援li元素:hover的使用,所以把文字包含到a中,對a使用:hover,並且將要顯示隱藏的部分放到span元素中;

css中我們將a的設定成塊級元素,並使a的大小和寬度和li的相同;

並設定a為相對位置,用a來模擬上例中的li;

而用span來模擬上例中的a,設定span在預設情況下隱藏(display:none;);

當a被觸發時(:hover),則span顯示(display:block;);

但,如果按照以上方式修改後,示例的效果,在ie6中依然無法顯示。

原因是:ie瀏覽器自身解析的問題,是ie5.5和ie6中偽類:hover的bug。

如何解決這個問題呢?

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

li a:hover {}

對其屬性我們僅設定width:100px;發現在ie6中依舊沒有變化,我們嘗試著更改width的value,比如使其width:99px,奇怪的事情發生了,在ie6中,隱藏的部分在觸發的時候顯示出來了。我們再對li a:hover的屬性僅設定color來測試(初始值為#fff),更改color值,發現在ie6下卻也不能觸發顯示。。。

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

說明:

1、不建議改變display值來做為特定屬性消除此bug,而且在某些例子中此屬性不一定能消除bug。

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

css1的寫法最終效果:

如不能顯示效果,請按ctrl+f5重新整理本頁,更多網頁**:

最少**實現版(xugang實現):

如不能顯示效果,請按ctrl+f5重新整理本頁,更多網頁**:

就拿對偽類:hover的支援來說,ie7+終於新增了對a以外其它標籤的支援。對於這樣的改進,當然是要拍手稱快的,但在ie6下,:hover就連對a的支援都不是那麼的盡如人意。下面就是我想簡單說的乙個關於:hover在ie6及更早瀏覽器下的問題。

很多人可能都已經知道了:hover在ie6及更早瀏覽器(以下稱ie6-)下的一些問題。我主要是想說一下形如a:hover span{}這樣的問題。

a:hover

滑鼠經過時改變我的顏色

是的,這將在所有的瀏覽器中都有效。但如果換成這樣:

a:hover em

滑鼠經過時改變我的顏色

你會發現在ie6-下什麼都沒有發生,我們的樣式失效了。對,就是這樣,應該很多人都碰到過且已經解決了這個問題。

是的,只需要再新增乙個a:hover{}樣式就可以解決這個問題了,裡面可以是zoom, padding, margin等屬性。如下:

a:hover

a:hover em

滑鼠經過時改變我的顏色

看著恢復了正常的效果,去想可能是因為什麼造成:hover失效的。你可以使用zoom, display, padding等等屬性來搞定,於是想會不會是因為haslayout。恩,很有可能就是這樣。但你接著測試,會發現,不論你在a:hover{}寫入任何屬性,color啊,font-size啊,overflow啊(甚至是不存在的屬性,如xx:yyy),都可以使之恢復正常。

測試到這裡是不是有點目瞪口呆的感覺?對,我也是這樣的。至於原因是什麼,我還不知道,或許有人知道。

IE中偽類 hover的使用及BUG

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

ie中偽類 hover的使用及bug

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

IE6中偽類 hover的使用及BUG

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