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

最近做了好多网站专题页面,因为专题页面图片较多,个别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);



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

时间: 2024-10-12 21:34:33

空a标签 a标签空的情况下 IE6 IE7下点击无效的相关文章

ie6,ie7下a标签无法点击(转载)

前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常.一开始以为是z-index的问题,但不论z-index设置多大依然还是无效.代码大致如下: <a style="position:absolute; top:0; left:0; display:block; width:100px; height:50px;" href="#"></a> 给a标签添加文

JSP常用标签——JSTL标签和EL表达式

一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复率较高的代码块支持复用,提高效率) 书写JSP页面时可读性更强(长得很像xml,方便前端查看和参与开发) 用事实告诉你为什么使用JSTL: 实现: 但是,使用JSTL效果如下: 3.JSTL环境搭建 JSTL的下载: 下载地址:http://archive.apache.org/dist/jakar

web day13 JSTL标签库(c标签,自定义标签),MVC设计模式,JavaWeb经典三层框架

JSTL 1. jstl的概述 *apache的东西,依赖EL * 使用jstl需要导入jstl1.2.jar * 四大库: > core:核心库,重点 > fmt:格式化:日期.数字 > sql:过时 > xml:过时 2. 导入标签库 *jar包 * 在jsp页面中:<%@taglib prefix="前缀" uri="路径"%> ---------------------- core --> c标签! 1. out和s

黑马day07 自定义标签&amp;简单标签

自定义标签的步骤: 1.写一个类实现SimpleTag接口或者继承SimpleTagSupport 2.写一个tld文件,描述写好的类 3.在jsp页面引入tld文件,就可以在jsp页面中使用自定义标签 执行原理: 当jsp在执行的过程中,每当遇到一个简单标签时都会创建一个处理类对象. 调用setJspContext传入当前jsp页面的PageContext对象. 如果当前标签有父标签则调用setParent方法将父标签传入,如果没有父标签则这个方法不会被调用. 如果该标签具有属性,调用属性的s

自学html-four(css初始化及html语义标签 -&gt; h标签 p标签 img标签 有序列表 无序列表 表格 超链接)

一.css初始化 现在我们来做一个简单的测试,测试步骤如下: 1.编写代码如下: 2.把改程序用不同的浏览器打开我们会发现同一份代码在不同的浏览器中的显示会有略微的差别: 360浏览器下显示效果图: 火狐浏览器下显示的效果图: 同一份代码在不同浏览器显示的效果存在差异的原因是:各浏览器对各元素的margin,border,font-size等的初始设置略有不同 解决方法:通过css强制让所有元素的属性值都一样 这里提供一段雅虎工程师css初始化代码,直接拷贝到css位置就可以了,body,div

解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

文章转载自:爱思资源网http://www.aseoe.com/show-10-701-1.html 导语 HTML5新标签在IE6 IE7 IE8上并不能识别,需要进行JavaScript处理.以下就介绍几种方式.方式一:Coding JavaScript<!--[ifltIE9]><script>(function(){if(! *@[email protected]* 0)return;vare="abbr,article,aside,audi HTML5新标签在I

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者.即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容.最常见的 百度(baidu.com).谷歌(google.com)等的搜索框就是这样来设计的.目的是为了给用户提供一个更好的输入体验. 在

html中的超链接标签-a标签 和 框架frame与框架集frameset

我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一个网页 a.html,输入下面的内容: <html> <head> <title> html中的超链接标签-a标签 </title> </head> <body> 1,直接转向其他页面: <a href="http://1

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码