htmla失效CSSIE67下a链接掉效的问题及解决计划

web运用中，常常须要在图片上添加相应的链接，而且相对付传统的笔墨链接的办法，不仅都雅，而且有更大的可点击区域。
例如，京东网图书页面的一个大略布局：

这种情形是险些没有任何问题的，但是，如果在img标签之外，a标签之内再添加一层元素（如div或者p标签），在IE6，7下虽然能够正常显示链接，但是却无法点击。
纵然你给a标签的样式加上

cursor:pointer;设置相应的高度和宽度，设置为display:block，依然是无法点击的。
如下所示的布局：

htmla失效CSSIE67下a链接掉效的问题及解决计划 JavaScript

对应的样式为：

.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父元素的样式来证明：

这种布局下：图片的区域是可以点击的。

具有hasLayout属性的标签（默认haslayout值为true）：

能够触发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标签上，布局如下：

2.保留div元素，但是去掉触发haslayout的width和height属性(实际上这样只是保留了空架子)。
如下

完全的测试代码如下：

<!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下测试。