IE6 中 a:hover 的bug

來源:互聯網
上載者:User

如上圖,在製作數位熱銷排行的頁面時,每種手機的圖片都是固定的160×120大小,但是出於頁面美觀及內容可讀性的考慮,在列表頁上圖片都壓縮為原大小的50%顯示;也就是80×60像素大小。不過當使用者將滑鼠移動到縮圖上時,我們會按原圖大小顯示出來。類似的效果在抓蝦上也被應用在顯示帳戶圖片上:

抓蝦使用的技術是利用一個隱藏的浮動層,每張縮圖上註冊mouseover事件,當滑鼠移動到縮圖上時,設定浮動層中img元素的src屬性為頭像的圖片URL,然後通過JavaScript計算絕對位置,將放大後的頭像顯示在縮圖上。

事實上,如果圖片顯示的大小已經固定的話,不需要JavaScript,只需要純CSS就可以實作類別似的效果。如在數位產品熱銷排行頁中,CSS的定義大致如下:

.DigitalImage a {
position: relative;
}
.DigitalImage a:hover {
position: relative;
z-index: 1;
border: none;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
z-index: 2;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}

原理很簡單,設定a元素的position屬性為relative,圖片最開始顯示為50%大小,使用預設定位;當:hover被觸發的時候,圖片更改為絕對位置,同時顯示為原圖大小,為了使效果看起來像是對稱的蓋在縮圖上,同時設定top和left為縮圖的寬高的一半的負數。

以上CSS中比較讓人費解的大概就是粗斜顯示的 border:none 一句。這看似一個毫無意義的效果,可是如果沒有這一句的話,在IE6中就無法觸發hover。

以前未曾遇到類似的問題,一番google,才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼:

<style>
a {}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘寶網 <span> 淘你喜歡 </span></a>

在IE7/FF中,滑鼠移動到連結上時,”淘你喜歡”字樣會變為紅色,但IE6則無反應。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的,也就是說如果a:hover 中沒有樣式的改變,hover就不會被觸發。但如果在a:hover{}增加一些特定的屬性,例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此時hover就可以觸發了。這樣的屬性還包括direction/text-align/text-indent/float/overflow/position …… 等等。我在數位產品暢銷榜頁面就是選擇了使用border:none。更詳細的資訊請參考:

  • IE Pure CSS Pop Ups Bug
  • IE中偽類:hover的使用及BUG

另外,通過閱讀 position:relative/absolute無法衝破的等級,發現CSS還有改進的空間,改動後如下:

.DigitalImage a:hover {
position: relative;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}

改動的原理就是去掉了a樣式定義,直接定義a:hover。這樣即避免了IE6的hover的Bug(position也是一個觸發顯示的屬性),另外也避免了 position:relative/absolute無法衝破的等級 一文中提到的z-index的問題,所以你會發現改進後的樣式中,z-index屬性也去掉了。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。