?

一般運用a標簽包含img去實現(xiàn)點擊圖片跳轉(zhuǎn)的功能，這是前端經(jīng)常要用到的東西。

今天遇到個神奇的bug：如果在img上再包裹一層div，而且div設(shè)置了width和height，則圖片區(qū)域點擊時，無任何響應(yīng)。

出現(xiàn)這個bug的條件是：1.a標簽下包含div這樣的塊元素
　　　　　　　　　　　2.塊元素必須設(shè)置width和height屬性值

　　　　　　　　　　　3.該塊元素下包含img

?

解決方法:改結(jié)構(gòu)或者讓三個條件的某一個失效就可以了

?

?

2015-05-22 補充

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

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的a标签点击跳转失效--IE6、7的奇葩bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。