a标签点击跳转失效--IE6、7的奇葩bug
2015-05-13 16:55
246 查看
一般运用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还是相当的惨)
今天遇到个神奇的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还是相当的惨)
相关文章推荐
- IE6下a标签无法点击bug----position和定义的宽度和高度
- IE6 中 window.location.href 不能跳转 以及关于a标签点击返回顶部的解决方法
- IE6下a标签无法点击bug 以及扩展
- IE7中a标签包含img,点击img,链接失效的bug
- IE6下a标签无法点击bug 以及扩展
- ie6下position fixed的失效bug
- IE6,IE7下设置body{overflow:hidden;}失效Bug【转】
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法 分类: ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏
- A标签绑定的juqery submit方法在ie6下失效原因分析及解决方案
- 如何让一个a标签的跳转失效
- 转载:IE6,IE7下设置body{overflow:hidden;}失效Bug
- 取消默认的点击事件IE6下BUG问题
- 阻止a标签点击跳转刷新
- IE6环境下遭遇winow.location.href=''的跳转bug
- 深入A标签点击触发事件而不跳转的详解
- 点击 a 标签触发事件而不跳转页面
- IE6下通过a标签点击切换图片的问题
- IE6,IE7下设置body{overflow:hidden;}失效Bug
- a标签点击跳转或表单提交前弹出确认框
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法