IE6常见Bug4：图片链接无效

2019-05-31 09:44:06

当一个链接包含了行内标签（如：span），行内标签又包含img元素时，如果行内标签触发了hasLayout，那么图片链接将无效
解决方案：给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> IE6/7中图片链接无效</title>
<style>
/* IE6/7中图片链接无效 */
.demo a,.demo a img{width:361px;height:69px;}
.demo a{display:block;}
.demo a span{zoom:1;}

#fix a{cursor:pointer;}
#fix a img{position:relative;z-index:-1;}
</style>
</head>
<body>
<h2>bug</h2>
<p>IE6/7对于以下这样的结构，如果span触发了haslayout，那么图片区域将点击无效</p>
<div class="demo">
<a href="#link">
<span><img src="/Upload/20141119210958cSsY.jpg" /></span>
</a>
</div>

<h2>解决方案</h2>
<p>给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;</p>
<div class="demo" id="fix">
<a href="#link">
<span><img src="/Upload/20141119210958VERf.jpg" /></span>
</a>
</div>
</body>
</html>