IE6和IE7中<a>标签宽高设置无效的问题
昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下, A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A标签受到父级的影响, 单独写DEMO的话,这个bug一直无法复现出来, 不知道是什么原因:
实际上出现的问题如下图,其中两个A标签宽度是整个页面的50%, 两个A标签都有position:absolute, width:50%;height:100%; 只有A标签有background的情况下, 这个A标签的宽高才生效, 否则你怎么弄, 这个标签width和高都为0, 仿佛不存在界面中:

因为元素的文档流是定位, 没有别的元素影响到A标签, 旁边也没有浮动的元素, 所以排除float元素和position元素并排一起出现的bug , 参考: position:absolute在IE6中不显示
写了一个大概的DEMO,无法复现这个问题, IE7的心我猜不了:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="ZOOM: 1">
<style>
.wraper{
position: absolute;
left:100px;
top:10px;
}
.wraper a {
position: absolute;
top: ;
left: ;
width: 100px;
height:100px;
z-index:;
cursor: pointer;
} .wraper .bg {
background: #f00;
top: 200px;
left: ;
} </style>
<div>
<div class="wraper">
<a href="#">
链接
</a>
<a href="#" class="bg">
链接
</a>
</div>
</div>
</body>
</html>
最后得出了结论:
在某些情况下,如果A标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。
也找到了两种解决方法:
1、给a标签添加样式:
background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即
opacity:;filter:alpha(opacity=);
写在最后面:
我把A标签换成了DIV标签, 同样存在这个问题, 解决方法同上;
IE6和IE7中<a>标签宽高设置无效的问题的更多相关文章
- IE7中a标签包含img,点击img,链接失效的bug
在做列表时,我们经常会这样写: <ul class="works-list"> <li> <a href=""> <d ...
- 从H264码流中获取视频宽高 (SPS帧) 升级篇
之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...
- 在IE6、IE7中实现块元素的inline-block效果
在IE6.IE7中实现块元素的inline-block效果有以下两种方法: 1先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联 ...
- JavaScript中的各种宽高以及位置总结
JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...
- LODOP中的各种宽高和位置简短问答
LODOP中的位置边距,可查看本博客另一篇相关博文:LODOOP中的各种边距 打印项.整体偏移.可打区域.内部边距关于LODOP中的各种宽高,可查看本博文简短问答下方的正文:.该文其实有两个以前的相关 ...
- Qt TabWidget QTabBar 宽高设置
/*************************************************************************** * Qt TabWidget QTabBar ...
- JavaScript中的各种宽高属性
转自慕课网:http://www.imooc.com/article/14516 在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...
- JavaScript及jQuery中的各种宽高属性图解
文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”. 作者声明:本 ...
- JavaScript中的各种宽高总结
window和document首先我们来高清两个概念: window和document的区别是什么? window.location和document.location是一样吗?第一个问题 ...
随机推荐
- poj1273 Drainage Ditches
Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 68414 Accepted: 2648 ...
- QFontMetrics的一个问题
今天发现QFontMetric的一个问题 QFontMetrics可以输入一个字体和一个字符串,计算出字符串在这种字体下的显示尺寸. 这种计算比较耗时间,因此Qt内部应该是缓存了计算结果.具体方法是在 ...
- Windows系统服务器IIS7.5 Asp.net支持10万请求的设置方法
问题现象 ECS Windows系统服务器基于IIS搭建的网站由于IIS默认的配置,服务器最多只能处理5000个同时请求,访问量大时很容易导致报错: Error Summary: HTTP Erro ...
- gitlab配置邮件通知功能操作记录
之前已经介绍了gitlab的部署http://www.cnblogs.com/kevingrace/p/5651402.html但是没有配置邮箱通知功能,今天这里介绍下gitlab安装后的邮箱配置操作 ...
- Centos5.8 iptables管理
使用第三方提供的Centos5.8 vmx安装的虚拟机实例, 在安装Tomcat时发现启动后8080端口无法访问, 先检查是否selinux作了限制 查看selinux状态: sestatus 查看s ...
- windows和ubuntu下gif动态图片的制作
现在社交软件中, 各种各样的动图为大家交流很大的乐趣. Gif图片比视频小, 比静态JPG图片形象生动, 更适用于产品展示和步骤演示等. 这里简单介绍一下在window系统和ubuntu系统下gif ...
- 动画制作库tween样例学习
mark: https://www.npmjs.com/package/tween
- (原创)解决Excel 互操作错误"检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070005"
最近在.net中处理Excel文件数据导入时报出以下错误: 检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下 ...
- Linux socket多进程服务器框架一
重点:socket共用方法中错误码的定义以及错误码的解析 底层辅助代码 //serhelp.h #ifndef _vxser #define _vxser #ifdef __cplusplus ext ...
- scala 学习笔记(03) 参数缺省值、不定个数参数、类的属性(Property)、泛型初步
继续学习,这一篇主要是通过scala来吐槽java的,同样是jvm上的语言,差距咋就这么大呢? 作为一个有.NET开发经验的程序员,当初刚接触java时,相信很多人对java语言有以下不爽(只列了极小 ...