IE6和IE7中<a>标签宽高设置无效的问题
设置 标签 gt lt 无效 IE6 问题 宽高
2023-09-11 14:17:26 时间
昨天写了一个引导界面, 发现界面中的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的心我猜不了:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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: 0; left: 0; width: 100px; height:100px; z-index:9999; cursor: pointer; } .wraper .bg { background: #f00; top: 200px; left: 0; } </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:0;filter:alpha(opacity=0);
写在最后面:
我把A标签换成了DIV标签, 同样存在这个问题, 解决方法同上;
相关文章
- Visual Studio中一个解决方案设置多个启动项目
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
- Word控件Spire.Doc 【Table】教程(2):如何设置Word表格列宽
- Flutter中文本输入框TexeFieldr键盘样式TextInputType总结TexeField设置不可编辑
- RHCSA 系列(十四): 在 RHEL 7 中设置基于 LDAP 的认证
- C#:设置焦点在最小的TabIndex控件上
- 为wsl ubuntu设置固定IP
- linux下nginx安装与设置开机启动
- HTML 菜单 a 标签设置样式
- Android开源项目——设置图文居中的按钮 IconButton
- matplotlib ax.tick_params 设置坐标轴刻度标签颜色
- HTML:浏览模式设置(meta标签)
- 适当设置,可以让win10显示更加和自己的意思
- 数据中心机房空调机组的设置与配置