一般运用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还是相当的惨)

a标签点击跳转失效--IE6、7的奇葩bug的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. 使用SUI框架下的<a>标签点击跳转页面不刷新的问题

    最近写好了几个页面,今天试着将各个页面的链接打通,然后问题就来了...(╯︵╰) 这里看一下原来想要实现的两个页面跳转的效果--点击图一标注的栏目可以跳转到一个新的页面图二... 按照之前写a标签的跳 ...

  3. a标签点击跳转到新窗口打开目标资源

    点击a标签跳转到新窗口打开目标资源, <a href="http://gd.zjtcn.com/facs/c_t_p1_圆钉 50-75.html" target=" ...

  4. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  5. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  6. <a>标签点击不跳转

    HTML中的<a></a>标签点击不跳转的方法 一.<a href="####" ></a> 使用这个方法我们会发现<a hr ...

  7. 设置a标签,实现点击跳转页面的两种效果

    设置a标签,实现点击跳转页面 这个问题,主要是设置a标签的属性target,下面对target属性进行描述: 跳转在同一个窗口 1,target="_self",  它使得目标文档 ...

  8. 解决a标签点击会出现虚框现象

    1.解决a标签点击会出现虚框现象. 当a标签获得焦点的时候,a标签的周围就会出现虚框,它不同于border,不占任何宽度,a失去焦点的时候就会消失,就是outline. 在遨游,Firefox ,IE ...

  9. <a>多颜色标签点击之后保持原色的一次实践, Ext Panel下解决及通用方案思路

    代码为片段, 需要自行设置全部环境方可全部运行. 案例背景 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下: 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方. ...

随机推荐

  1. UWP学习目录整理

    UWP学习目录整理 0x00 可以忽略的废话 10月6号靠着半听半猜和文字直播的补充看完了微软的秋季新品发布会,信仰充值成功,对UWP的开发十分感兴趣,打算后面找时间学习一下.谁想到学习的欲望越来越强 ...

  2. C语言 · 时间转换

    问题描述 给定一个以秒为单位的时间t,要求用"<H>:<M>:<S>"的格式来表示这个时间.<H>表示时间,<M>表示分 ...

  3. Gradle配置APK自动签名完整流程

    转载请注明出处:http://www.cnblogs.com/LT5505/p/6256683.html 一.生成签名 1.命令行生成签名,输入命令keytool -genkey -v -keysto ...

  4. JavaScript 开发规范

    本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...

  5. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  6. 两个 viewports 的故事-第二部分

    原文链接:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素的宽度是如何工作的,比如说 <ht ...

  7. Android 死锁和重入锁

    死锁的定义: 1.一般的死锁 一般的死锁是指多个线程的执行必须同时拥有多个资源,由于不同的线程需要的资源被不同的线程占用,最终导致僵持的状态,这就是一般死锁的定义. package com.cxt.t ...

  8. Android之ContentProvider数据存储

    一.ContentProvider保存数据介绍 一个程序可以通过实现一个ContentProvider的抽象接口将自己的数据完全暴露出去,而且ContentProvider是以类似数据库中表的方式将数 ...

  9. sql server 取文件名函数 转载

    /****** Object: UserDefinedFunction [dbo].[GetDirectoryPath] Script Date: 2016-12-16 16:54:05 ****** ...

  10. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...