前言：
眼前姐妹们对“cssleft失效”都比较关心，小伙伴们都需要学习一些“cssleft失效”的相关文章。那么小编也在网上汇集了一些有关“cssleft失效””的相关知识，希望我们能喜欢，小伙伴们快快来学习一下吧！问题描述：
web应用中，经常需要在图片上添加相应的链接，而且相对于传统的文字链接的方式，不仅美观，而且有更大的可点击区域。例如，京东网图书页面的一个简单布局：
<a title="毕业歌" href="" target="_blank"><img width="130" height="130" src=""></a>
这种情况是几乎没有任何问题的，但是，如果在img标签之外，a标签之内再添加一层元素（如div或者p标签），在IE6，7下虽然能够正常显示链接，但是却无法点击。即使你给a标签的样式加上
cursor:pointer;设置相应的高度和宽度，设置为display:block，依然是无法点击的。如下所示的布局：
<a href="" target="_blank"><div class="a"><img src="test.jpg"/></div><div class="b"><img src="test.jpg"/></div></a>
对应的样式为：
.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父元素的样式来证明：
<a href="" target="_blank"><div><img src="test.jpg"/></div><div><img src="test.jpg"/></div></a>
这种布局下：图片的区域是可以点击的。
具有hasLayout属性的标签（默认haslayout值为true）：
<html> <body> <table> <tr> <td> <td> <img> <hr> <input> <button> <select> <textarea> <fieldset> <legend><iframe> <embed> <object> <applet> <marquee>
能够触发hasLayout的css属性(样式有)：
display:inline-block;
float:left|right;
width(height):除了auto之外的值。
position:absolute;
zoom:1 显式开启hasLayout。
Ie7下触发hasLayout的样式属性还有：
min-width,min-height等。
关于haslayout的更多细节，也可以参考这篇文章：
知道了原因，针对以上的问题，解决的方案有：
1.去掉img标签的元div元素，将父元素的样式迁移到img标签上，布局如下：
<a href="" target="_blank"><img class="a" src="test.jpg"/><img class="b" src="test.jpg"/></a>
2.保留div元素，但是去掉触发haslayout的width和height属性(实际上这样只是保留了空架子)。如下
<a href="" target="_blank"><div><img class="a" src="test.jpg"/></div><div><img class="b" src="test.jpg"/></div></a>
完整的测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html xmlns="" 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="" target="_blank"><div class="a"><img src="test.jpg"/></div><div class="b"><img src="test.jpg"/></div></a></div></body></html>
请在IE6,7下测试。
标签： #cssleft失效
