关于a标签中图文链接在IE的一个BUG分析

此文中提到的问题是在IE6/IE7中出现的

在五一之前Rock给了我一个很好玩的demo，当时我看到他所给代码跟截图时心中想到这个解决方法应该有很多哦，为什么一定要这样折腾自己呢，搞那么问题BUG出来呢。不过后来深入的了解之后才发现这个问题真的很好玩，当时一直想不出来为什么，然后Rock告诉我说他问题是解决了，但不知道是为什么。而解决的办法他提到了“无法冲破的z-index”让我猛然想起了小毅写的《position:relative/absolute无法冲破的等级》，难道跟这个有关，简单测试一下，果然如此。

当时虽然是解决了问题，不过也没啥心情去折腾个究竟，丢在桌面无视之。晚上突然感觉想到，于是乎就有了这篇日志了。废话不多说，先来看Rock给我的demo，似乎有点被修改过了，那么我自己也来整一份吧，请点这里看我整的这个DEMO，用IE打开哦。

相信用IE浏览器打开刚刚的demo时，大家已经可以看到在IE浏览器中无法通过点击图片的链接而跳转到另外一个页面，而这里使用的XHTML结构是：

^? View Code XML

1 2 3

<a href="http://blog.linxz.de/about_anchor_bug_for_ie/" id="a"> <span class="cover" id="cover"><img src="http://blog.linxz.de/wp-content/themes/linxz/img/book.jpg" alt="css那些事儿" /></span>小志的第一本书《css那些事儿》 </a>

通过这个结构我们可以看到，是用了一个a标签包含了图片和文字，而图片img标签和普通文本，其中img标签又是在span标签之内的。按照常理，这样的结构是不会出现什么BUG之类的才对，但是需求是要在图片的外面固定一个宽高，使图片超过某个宽高后被截断，而文字又是不固定的，或许会有很多很多的文字内容。或许就是因为这样的一个需求，Rock才使用了上面的结构，并且把span标签设置为块，使它具有宽高属性。

^? View Code CSS

1 2 3 4

body {margin:0;padding:20px;} img {border:0 none;} #a {display:block;width:76px;font-size:12px;} #a .cover {display:block;width:76px;height:90px;overflow:hidden;margin:0 0 8px;}

很不幸，IE中的问题随之而来，无法通过让图片具有可点击并且链接到相对应页面的效果了，甚至是连链接的手型也消失了。

在IE中遇到问题习惯性使用zoom:1;的方式进行处理，结果发现失败。最终解决的方案是在Rock的提醒下使用了z-index:-1;方式解决，请看demo，但不解的是这个是为什么呢，为什么要把层级降低到负值后才可以呢？

^? View Code CSS

1 2 3 4

body {margin:0;padding:20px;} img {border:0 none;} #a {display:block;width:76px;font-size:12px;} #a .cover {display:block;width:76px;height:90px;overflow:hidden;margin:0 0 8px;position:relative;z-index:-1;}

带着这个不明白的问题，翻了一下我看不懂的英文网站，俗称装B，不过放心，我不怕雷劈，为了学习嘛。^O^……结果还是没找到让自己满意的答案，那么就自己动手吧，一点点的测试，或许会搞明白点什么的。

或许真的是机会总是留给有准备的人滴，我使劲地测试着，终于，看到了一点点奇迹出现，无意间在tabindex属性中看到了曙光……

请用FF浏览器和IE浏览器分别打开这个demo看看，弹出来的tabindex属性值的区别

很明显地可以看到在IE浏览器中所看到的span的tabindex属性值是0，而FF浏览器确实-1，那么是不是可以理解成在FF浏览器已经将a标签内的元素“置底”了呢，我想或许应该可以这样理解吧。

如果可以这样理解的话，那么在span标签中增加tabindex属性，并设置一个相对比较高的属性值会是怎样的一个表现效果呢，是否会满足我的假设呢？

^? View Code XML

1 2 3

<a href="http://blog.linxz.de/about_anchor_bug_for_ie/" id="a"> <span class="cover" id="cover" tabindex="10"><img src="http://blog.linxz.de/wp-content/themes/linxz/img/book.jpg" alt="css那些事儿" /></span>小志的第一本书《css那些事儿》 </a>

仔细看了demo之后，发现我的假设似乎是成立的。大家可以对比未增加tabindex属性的demo和增加了tabindex属性的demo。在点击链接的时候按住鼠标不要松开，我们会发现焦点虚线表现的方式完全不同了。

在FF浏览器中我们可以看到当增加了tabindex属性的时候，焦点的虚线是在图片上；而未增加的时候焦点的选线却是包含了图片和文字。

在IE浏览器中我们可以看到的是当增加了tabindex属性的时候，点击图片时虽然无链接效果，但是焦点的虚线却出现在图片的周围了，而后再点文字时会发现焦点的虚线包含了整个图片和文字；但是在没有增加tabindex属性的时候呢，图片是没任何效果，仅有点文字的时候才会有焦点图片。

总结以上废话，简单一句话就是，IE有病，没事把a标签内元素块状化后就不去让它的儿子在层叠方面降级，所以我们只好通过手工方式给它的儿子降级，使用position:relative;z-index:-1;

转载地址：http://blog.linxz.de/about_anchor_bug_for_ie/