空a标签 a标签空的情况下 IE6 IE7下点击无效
2024-10-09 12:53:47
最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则需要用空a标签来做,发现“a标签”在IE6与IE7中点击无效中点击不了(“a标签”定义宽度和高度IE浏览器为零0),其他浏览器都正常(如果不正常请加“display:bolck;”(←推荐)或“float:left;”)。
代码大致如下:
<div class="large_banner">
<img src="data:images/banner.jpg" width="966"
height="471" />
<div class="button"><a
href="#"></a></div>
<img src="data:images/banner.jpg" width="966"
height="471" />
<div class="button"><a
href="#"></a></div>
<div class="nr">空a标签 a标签空的情况下 IE6
IE7下点击无效</div>
</div>
样式:
.large_banner{ overflow:hidden;
position:relative;}
position:relative;}
.large_banner .nr { width:600px; height:76px; z-index:2;
bottom:30px; right:30px;position:absolute; }
bottom:30px; right:30px;position:absolute; }
.large_banner .button { width:123px; height:37px; z-index:3;
bottom:150px; right:114px; position:absolute;}
bottom:150px; right:114px; position:absolute;}
.large_banner .button a { float:left; width:123px;
height:37px;background:url(about:blank);}
height:37px;background:url(about:blank);}
//简单的写就是:
<div
class="large_banner">
<img
src="data:images/banner.jpg" width="966" height="471"
/>
<a
href="#"></a>
class="large_banner">
<img
src="data:images/banner.jpg" width="966" height="471"
/>
<a
href="#"></a>
</div>
样式:
.large_banner{ overflow:hidden;
position:relative;}
position:relative;}
.large_banner a { float:left; width:123px;
height:37px;background:url(about:blank); bottom:150px;
right:114px; position:absolute;}
height:37px;background:url(about:blank); bottom:150px;
right:114px; position:absolute;}
//ps页面浮动过多部要建议把 float:left; 替换成 display:block;
两种解决方法(主要是针对a标签不能设置背景情况):
1、给a标签添加样式:background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);
*注:推荐使用第一种方法,尽量少用滤镜
最新文章
- react-native DatePicker日期选择组件的实现
- 【Mysql】 局域网远程连接问题
- 操作系统核心原理-7.设备管理:I/O原理
- 使用Fiddler针对Android手机网络请求抓包
- wpf 触发器,属性触发器,事件触发器,事件触发器。
- 翻译之basename()
- <;context:annotation-config>; 和 <;context:component-scan>;的差别
- cf--2A
- Python开发【第一篇】Python基础之正则表达式补充
- 2016计蒜之道复赛 菜鸟物流的运输网络 网络流EK
- 《JavaScript高级程序设计》 读书笔记(三)
- spring 定时器----quartz启动问题
- asp 域名跳转
- vim cheat sheet
- magento1.x 运行在 php7 优惠券的问题
- 邓_html_图片轮播
- [LeetCode] Dota2 Senate 刀塔二参议院
- 浏览器登录EBS系统遇到问题总结
- 百度地图API,展示地图和添加控件
- ASP.NET MVC - 处理Html数据
热门文章
- echarts动态添加数据(饼图为例)
- ERP和MES破冰之路 [普实MES升级中国“智”造]
- webots自学笔记(一)软件界面和简单模型仿真
- burpsuite+sqlmap跨登录验证SQL注入
- sublime 快速安装多个插件的两种方法[Advanced Install Package]与[Package Control.sublime-settings]
- Https握手协议以及证书认证
- Mac本地编辑服务器代码
- php与mysql的常规使用
- 第一篇Active Directory疑难解答概述(1)
- system()、exec()、fork()三个与进程有关的函数的比较