码迷,mamicode.com
首页 > 其他好文 > 详细

空a标签 a标签空的情况下 IE6 IE7下点击无效

时间:2014-05-29 09:24:00      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:style   c   class   blog   tar   http   

最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则需要用空a标签来做,发现“a标签”在IE6与IE7中点击无效中点击不了(“a标签”定义宽度和高度IE浏览器为零0),其他浏览器都正常(如果不正常请加“display:bolck;”(←推荐)或“float:left;”)。

 
代码大致如下:
 
 
 
<div class="large_banner">
< img src="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;}
.large_banner .nr { width:600px; height:76px; z-index:2; bottom:30px; right:30px;position:absolute; }
.large_banner .button { width:123px; height:37px; z-index:3; bottom:150px; right:114px; position:absolute;}
.large_banner .button a { float:left; width:123px; height:37px;background:url(about:blank);}
 
 
//简单的写就是:
 
 
<div class="large_banner">
<img src="images/banner.jpg" width="966" height="471" />
<a href="#"></a>
</div>  
 
 样式:
.large_banner{  overflow:hidden; position:relative;}
.large_banner a { float:left; width:123px; 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);


*注:推荐使用第一种方法,尽量少用滤镜

空a标签 a标签空的情况下 IE6 IE7下点击无效,布布扣,bubuko.com

空a标签 a标签空的情况下 IE6 IE7下点击无效

标签:style   c   class   blog   tar   http   

原文地址:http://www.cnblogs.com/Fran-Lily/p/3756769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!