对于这一个情况，tyson已经做了一定的整理
这里我就补充我所遇到的另一种情况。
情况二（position和background）的补充
| <p>HTML code</p> <pre><ul> <li><img src=”banner.png” alt=”” /> <a class=”btn” href=”http://www.baidu.com/”>点击按钮</a></li> </ul></pre> |
| <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里，除了文字部分可以点击外，其他部分都不可以点击。
解决方法是：
| <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> |
| <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的方法相同，都是给链接加上一个背景，因为在上面的情况下加背景会遮住按钮，所以这里只给链接加一个透明的背景，即
| background:url(‘#’)。 |
作者
admin@wordpress.com