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是一样吗?第一个问题 ...
随机推荐
- 微软前 CEO 史蒂姆·鲍尔默：除了我们没人拼得过苹果硬件
微软通过 Surface Book 正式宣布进军笔记本电脑行业的同时,宣传语表示 Surface Book“比苹果的 MacBook Pro 还要快两倍”. 业界对 Surface Book 的好评连 ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- JSP前三章错题整理
A: B: C: D: web-inf目录中的文件不能被客户端直接访问. 正确答案是 C 您回答的是 D 回答错误 试题分析纠错设为收藏 (选择一项) 14 A: B: C: Tomcat作为Web ...
- java 28 - 5 JDK5的新特性 之 枚举的使用
上一章,自定义了枚举类,超级麻烦.. 所以,JAVA给了一个枚举类:类 Enum<E extends Enum<E>> 注意事项 定义枚举类要用关键字enum 所有枚举类都是E ...
- 直接拿来用！最火的Android开源项目（完结篇）
直接拿来用!最火的Android开源项目(完结篇) 2014-01-06 19:59 4785人阅读 评论(1) 收藏 举报 分类: android 高手进阶教程(100) 摘要:截至目前,在GitH ...
- P3384 【模板】树链剖分
P3384 [模板]树链剖分 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节 ...
- 笔记 （note）
笔记[问题描述]给定一个长度为m的序列a,下标编号为1~m.序列的每个元素都是1~n的整数.定义序列的代价为m−1 ∑|ai+1-ai| i=1 你现在可以选择两个数x和y,并将序列a中所有的x改成y ...
- POJ 1743 Musical Theme
感觉最近好混乱......各种OJ都刷一点,感觉不太好......尤其是这种英文题 这道题一开始还没有看懂.听了ljh大犇的解释后终于明白了.下面我为英语和我一样的人翻译一下题面: 输入n个数.求最长 ...
- MYSQL游标使用
CREATE PROCEDURE `sp_UpdateData`() BEGIN ); /*修改会员卡的几个金额*/ DECLARE done INT DEFAULT FALSE; DECLARE c ...
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" h ...