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

时间 2019-12-06

标签 CSS ie6 连接失效问题解决方案栏目 CSS 繁體版

原文原文链接

问题描述：

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

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

这种状况是几乎没有任何问题的，可是，若是在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">spa
<img src="test.jpg"/>.net
</div>code
<div class="b">xml
<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下测试。