【CSS】 IE6 ，7下a链接失效的问题及解决方案

最新推荐文章于 2021-06-04 17:29:34 发布

ohmygirl

最新推荐文章于 2021-06-04 17:29:34 发布

阅读量8k

点赞数

分类专栏： javascript、css前端

本文链接：https://blog.csdn.net/ohmygirl/article/details/17768713

版权

javascript、css前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题描述：

web应用中，经常需要在图片上添加相应的链接，而且相对于传统的文字链接的方式，不仅美观，而且有更大的可点击区域。例如，京东网图书页面的一个简单布局：

<a title="毕业歌" href="http://item.jd.com/11366857.html" target="_blank">
    <img width="130" height="130" src="http://img10.360buyimg.com/N3/g15/M02/1A/01/rBEhWFKefgMIAAAAAAasi2nEFKYAAGSvgNUZjAABqyj646.jpg">
</a>

这种情况是几乎没有任何问题的，但是，如果在img标签之外，a标签之内再添加一层元素（如div或者p标签），在IE6，7下虽然能够正常显示链接，但是却无法点击。即使你给a标签的样式加上
cursor:pointer;设置相应的高度和宽度，设置为display:block，依然是无法点击的。如下所示的布局：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
	<div class="a">
		<img src="test.jpg"/>
	</div>
	<div class="b">
		<img src="test.jpg"/>
	</div>
</a>

对应的样式为：

.a,.b{
	width:140px;
	height:140px;
	float:left;
	margin:10px 0 10px 10px;
	display:inline;
}

在IE6 ,7下，右键点击可以显示“在新标签中打开链接”等选项，证明不是a链接无效。而且在两图片的margin的空白区域，是可以点击的，只有图片的区域却无法点击（也就是图片区域的连接失效了）
这是由于，在IE6,7中，由于触发了img标签的父元素的hasLayout属性，从而使得父元素（这里是div元素）自己的布局掩盖了a标签的链接。这一点，我们可以通过禁用img父元素的样式来证明：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
	<div>
		<img src="test.jpg"/>
	</div>
	<div>
		<img src="test.jpg"/>
	</div>
</a>

这种布局下：图片的区域是可以点击的。

具有hasLayout属性的标签（默认haslayout值为true）：

<html> <body> <table> <tr> <td> <td> <img> <hr> <input> <button> <select> <textarea> <fieldset> <legend><iframe> <embed> <object> <applet> <marquee>

能够触发hasLayout的css属性(样式有)：
display:inline-block;
float:left|right;
width(height):除了auto之外的值。
position:absolute;
zoom:1 显式开启hasLayout。
Ie7下触发hasLayout的样式属性还有：
min-width,min-height等。
关于haslayout的更多细节，也可以参考这篇文章：

http://www.jb51.net/web/77542.html

知道了原因，针对以上的问题，解决的方案有：

1.去掉img标签的元div元素，将父元素的样式迁移到img标签上，布局如下：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
	<img class="a" src="test.jpg"/>
	<img class="b" src="test.jpg"/>
</a>

2.保留div元素，但是去掉触发haslayout的width和height属性(实际上这样只是保留了空架子)。如下

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
	<div>
		<img class="a" src="test.jpg"/>
	</div>
	<div>
		<img class="b" src="test.jpg"/>
	</div>
</a>

完整的测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>关于 hasLayout</title>
<style type="text/css">
	html,body,div,p,a,img{
		margin:0;
		border:0;
	}
	.wrapper{
		width:312px;
		text-align:center;
		margin:0 auto;
		margin-top:100px;
		border:1px solid red;
	}
	.a,.b{
		width:140px;
		height:140px;
		float:left;
		margin:10px 0 10px 10px;
		display:inline;
	}
</style>
</head>
<body>
<div class="wrapper">
<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
	<div class="a">
		<img src="test.jpg"/>
	</div>
	<div class="b">
		<img src="test.jpg"/>
	</div>
</a>
</div>
</body>
</html>

请在IE6,7下测试。

测试的效果图：

ohmygirl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】 IE6 ，7下a链接失效的问题及解决方案

问题描述：web应用中，经常需要在图片上添加相应的链接，而且相对于传统的文字链接的方式，不仅美观，而且有更大的可点击区域。例如，京东网图书页面的一个简单布局：这种情况是几乎没有任何问题的，但是，如果在img标签之外，a标签之内再添加一层元素（如div或者p标签），在IE6，7下虽然能够正常显示链接，但是却无法点击。即使你给a标签的样式加上cursor:pointer;设置
复制链接

扫一扫