对于这一个情况,tyson已经做了一定的整理

部分点击之bug

这里我就补充我所遇到的另一种情况。

情况二(position和background)的补充

1
2
3
4
<p>HTML code</p>
<pre><ul>
<li><img src="banner.png" alt="" /> <a class="btn" href="http://www.baidu.com/">点击按钮</a></li>
</ul></pre>
1
2
3
4
5
6
<p>css code</p>
<pre class="brush:css">*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{width:600px;height:300px;margin:0 auto;}
li{ position:relative; }
.btn{position:absolute;right:200px;top:100px;width:100px;height:50px;font-size:20px;color:#fff;line-height:50px;text-align:center;overflow:hidden;}</pre>

查看demo>>

在一个相对定位的li中,我放入了一张图片和一个绝对定位并拥有布局的a。其中a定位到图片的按钮上。照理说,a应该会覆盖整个按钮,在按钮的任何位置上都可以点击链接。但在所有的ie里,除了文字部分可以点击外,其他部分都不可以点击。

解决方法是:

1
2
3
4
<p>HTML code</p>
<pre class="brush:xhtml"><ul>
<li><img src="banner.png" alt="" /> <a class="btn" href="http://www.baidu.com/">点击按钮</a></li>
</ul></pre>

1
2
3
4
5
6
<p>css code</p>
<pre class="brush:css">*{margin:0;padding:0;}
ul,li{list-style:none;}
ul{width:600px;height:300px;margin:0 auto;}
li{ position:relative; }
.btn{position:absolute;right:200px;top:100px;width:100px;height:50px;background:url('#');font-size:20px;color:#fff;line-height:50px;text-align:center;overflow:hidden;}</pre>

查看demo>>

这里的解决方法与tyson的方法相同,都是给链接加上一个背景,因为在上面的情况下加背景会遮住按钮,所以这里只给链接加一个透明的背景,即

1
background:url('#')。