a標簽點擊跳轉失效--IE6、7的奇葩bug


 

一般運用a標簽包含img去實現點擊圖片跳轉的功能,這是前端經常要用到的東西。

今天遇到個神奇的bug:如果在img上再包裹一層div,而且div設置了width和height,則圖片區域點擊時,無任何響應。

出現這個bug的條件是:1.a標簽下包含div這樣的塊元素
           2.塊元素必須設置width和height屬性值

           3.該塊元素下包含img

 

解決方法:改結構或者讓三個條件的某一個失效就可以了

 

 

2015-05-22 補充

1.就算將a標簽設置為display:block;也同樣失效
2.只要不在img覆蓋的區域,a標簽點擊還是有效的
3.之所以這樣用,是想更多地以取巧的方式,利用a標簽的默認功能,實現簡單的跳轉,而不用寫多余的js代碼
4.可以利用:hover偽類,進行樣式的切換(這在低版本瀏覽器下,是最高效,直接的方式)
5.在高級瀏覽器,將a標簽display:block;,從意義上來說,不存在太大的問題(當然,裸css還是相當的慘)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM