可我們發(fā)現(xiàn)上例中的效果,在IE6中依然無法顯示,難道我們的代碼寫錯(cuò)了,可檢查來檢查去一點(diǎn)錯(cuò)誤也沒有(不信你找個(gè)高高手問問,他們依然會(huì)回答你,這代碼完全正確),難道是標(biāo)準(zhǔn)中的說明是錯(cuò)的?還是IE6瀏覽器連CSS1也不支持?很多疑問從四面八方跑來了……
那到底是什么問題呢?
不是標(biāo)準(zhǔn)說明的錯(cuò),也不是IE瀏覽器不支持CSS1,而是IE瀏覽器自身解析的問題,是IE5.5和IE6中偽類:hover的BUG。
那又該如何解決這個(gè)問題呢?
這個(gè)BUG可以通過在鏈接的屬性中增加某些特殊的CSS屬性聲明來消除。
下面我們對(duì)上面的第二個(gè)例子進(jìn)行實(shí)驗(yàn),究竟哪些屬性可以幫我們來消除這些BUG。
對(duì)CSS代碼我們?cè)黾樱?/span>
li a:hover {}
對(duì)其屬性我們僅設(shè)定width:100px;發(fā)現(xiàn)在IE6中依舊沒有變化,我們嘗試著更改width的value,比如使其width:99px,奇怪的事情發(fā)生了,在IE6中,隱藏的部分在觸發(fā)的時(shí)候顯示出來了。我們?cè)賹?duì)li a:hover的屬性僅設(shè)定color來測(cè)試(初始值為#fff),更改color值,發(fā)現(xiàn)在IE6下卻也不能觸發(fā)顯示,奇怪,奇怪,真奇怪……是不是依舊是一頭霧水……沒關(guān)系,繼續(xù)往下實(shí)驗(yàn),或許歸類了我們就能發(fā)現(xiàn)規(guī)律了!
我們?cè)儆闷渌麑傩赃M(jìn)行設(shè)置: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。
我們發(fā)現(xiàn)除了text-decoration,color,z-index不能觸發(fā)顯示(對(duì)于不能觸發(fā)顯示的部分,可以還有某些遺漏的屬性,歡迎朋友補(bǔ)充)外,其他屬性均可以做為消除偽類:hover BUG的特定屬性。
說明:
- 對(duì)于dispaly不可以用本例來測(cè)試,可另外寫個(gè)更簡(jiǎn)單的例子(去除ul/li,a和span中的position)。在實(shí)際應(yīng)用中懌飛不建議改變display值來做為特定屬性消除此BUG,而且在某些例子中此屬性不一定能消除BUG。
- 對(duì)于做為特定屬性的border和background中的顏色我們還可用全寫和簡(jiǎn)寫來改變,如#fff和#ffffff在消除BUG中解析為2個(gè)不同的值。
最終效果:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
經(jīng)典論壇討論: http://bbs.blueidea.com/thread-2721472-1-2.html
本文鏈接:http://m.95time.cn/tech/web/2007/4504.asp
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁 IE中偽類:hover的使用及BUG [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|