关于a标签下的img元素在IE7下不能点击的问题

直接附上代码，在这里

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">

.u-cover {
    position: relative;
    width: 225px;
    height: 204px;
    float: left;
    margin: 20px 0 0 20px;
    background-color: #fff;
}
.wrap {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.img {
    padding: 1px 1px 0;
    height: 124px;
    width: 223px;
    position: relative;
}
.pic {
    position: relative;
    overflow: hidden;
    height: 124px;
    width: 100%;
}
.j-imgArea {
    width: 223px;
    height: 124px;
}

</style>
</head>
<body>
    <a target="_blank" class="j-hrf wrap" href="http://image.baidu.com/">
        <div class="img">
            <div class="pic">
                <img class="j-imgArea" src="http://img0.bdstatic.com/img/image/shouye/dmhzw002.jpg">
                <div class="planflag"></div>
            </div>

        </div>
    </a>
</body>
</html>

主要的问题就是在IE7的时候图片不能点击，现在找到的解决的方法就是给
.img 还有.pic设置了hack为*display: inline;现在就是不知道这原因是什么呢？

希望知道的大大可以指点一二，或者可以直接看http://jsfiddle.net/Tankpt/bLr74ycc/这里的链接

不知道你把a放在最外层是有什么需求。如果直接放在应该是没有问题的。
当然要放在最外层的a，display:block 应该就可以了。

这个是行内元素和块元素的问题把你的代码改成：

<a target="_blank" class="j-hrf wrap" style="display:block" href="http://image.baidu.com/">
        <span class="img">
            <span class="pic">
                <img class="j-imgArea" src="http://img0.bdstatic.com/img/image/shouye/dmhzw002.jpg">
                <span class="planflag"></span>
            </span>

        </span>
 </a>

后会发现连接能点击，这是因为a标签是属于行内元素，在老的游览器（包括ie7）中行内元素内部不能放块元素，你可以做下实验，但是高级游览器把这个小毛病给修正了说以不会发生连接不能点击的现象。

HTML 4.01规定<a>只应包含inline元素，而<div>是一个block元素，不过HTML 5倒是不再这么要求了。

你要么把<a>里的<div>的position: relative去掉，要么就按你现在的hack来解决。

没啥原因，就是IE7有问题。

【热门文章】