IE7中a标签包含img,点击img,链接失效的bug
在做列表时,我们经常会这样写:
<ul class="works-list">
<li>
<a href="">
<div class="photo"><img src="./img/works-1.png"></div>
<p class="works-name">不安的种子</p>
</a>
</li>
<li>
<a href="">
<div class="photo"><img src="./img/works-1.png"></div>
<p class="works-name">不安的种子</p>
</a>
</li>
</ul>
在现代浏览器下点击图片或者a标签里的其他部分,均能链接到指定url,但是在ie6,ie7,部分ie8下鼠标hover到img上并没有出现鼠标的手,而且点击也没有反应。
解决方法:
推测是css样式问题,在img的父元素div上,我设置的css有:
overflow: hidden; zoom:1;width:200px; height:200px;
经查阅资料,img的父div上如果设置width和height,就会导致这种情况,去掉宽高,仍然无效,再将 overflow: hidden; zoom:1; 去掉,就可以了。由此看来,父div上不能设置任何样式。 如果其他浏览器需要 overflow: hidden; 可以添加 *overflow:visible; ,为ie低版本设置hack。
本文参考http://www.qttc.net/201210227.html
IE7中a标签包含img,点击img,链接失效的bug的更多相关文章
- 仅Firefox中A元素包含Select时点击Select不能选择option
这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...
- IE6和IE7中<a>标签宽高设置无效的问题
昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下, A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A ...
- 关于easyui框架中a标签使用onclick()触发事件偶尔会选项卡消失BUG解决方案
今天发现公司的一个easyui项目中有个页面会在触发onclick事件时选项卡消失,如下图 产生BUG后 产生BUG前 查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...
- C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值
//C#使用正则表达式获取HTML代码中a标签里包含指定后缀的href的值,表达式如下: Regex regImg = new Regex(@"(?is)<a[^>]*?href ...
- html中meta标签及用法理解
自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...
- 用disabled属性修饰a标签,a标签仍然能点击
1.不知道各位同学有没有遇到跟我相同的问题,就是用jQuery操作a标签disabled的,来控制重复提交表单 做过开发的都知道,表单验证重复提交,包含前端和后端,两方面的控制.前端控制使我们常用的手 ...
- 前端 -----02 body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 02-body标签中相关标签
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
随机推荐
- unity热更新方案对比
Unity应用的iOS热更新 • 什么是热更新 • 为何要热更新 • 怎样在iOS 上对Unity 应用进行热更新 • 支持Unity iOS 热更新的各种Lua 插件的对照 什么是热更新 • ...
- java基础—注解annotation
一.认识注解 注解(Annotation)很重要,未来的开发模式都是基于注解的,JPA是基于注解的,Spring2.5以上都是基于注解的,Hibernate3.x以后也是基于注解的,现在的Struts ...
- Html5的等学习
看了w3c感觉是说明文档,没有详细的说明,然后就去看其他的 html5其实就是在html的基础上做了一些改变,感觉html5的推广还是需要时间的,因为习惯问题,虽然html5有很多很方便的标签如art ...
- fiddler 模拟发送post请求
打开fiddler,选择在右边的Composer工具栏,打开Parsed选项,然后数据发送协议,例如选择POST, POST右边输入框可以输入访问地址, 下方的输入框可以输入发送的输入操作,例如发送的 ...
- 【转】BP神经网络
学习是神经网络一种最重要也最令人注目的特点.在神经网络的发展进程中,学习算法的研究有着十分重要的地位.目前,人们所提出的神经网络模型都是和学习算 法相应的.所以,有时人们并不去祈求对模型和算法进行严格 ...
- laravel5 使用try catch
在laravel5中使用以下代码并没有捕获异常 try{ var_dump($val); }catch (Exception $e){ var_dump($e); } Laravel 5 时代控制器 ...
- yagmail 邮箱的使用
文章来源:GITHub:https://github.com/kootenpv/yagmail 安装 pip3 install yagmail pip3 install keyring 简单例子 im ...
- GoF23种设计模式之行为型模式之解释器模式
一.概述 给定一种语言和其文法的一种表示,再定义一个解释器,该解释器使用表示来解释语言中的句子. 二.适用性 当需要解释一种语言,并且可以将该语言中的句子表示 ...
- Java Web系统常用的第三方接口
1. Web Service 接口 1.1 接口方式说明和优点 在笔者的开发生涯中,当作为接口提供商给第三方提供接口时,以及作为客户端去调用第三方提供的接口时,大部分时候都是使用 Web Se ...
- python学习博客推荐
https://www.liaoxuefeng.com/