IE7下a标签下包含图片时无法点击的问题

来源：互联网发布：山东交通学院网络教学编辑：程序博客网时间：2024/05/09 08:49

代码：

<div class="avatar-box">
<img src="$imagePrefix/201612_snowflower_pc/snow.png" class="avatar">
<img src="$imagePrefix/201612_snowflower_pc/avatar_frame.png" class="bg">
<p class="nickname ellipsis">1昵称要尽量很长哦</p>
</div>
<div class="send-btn not-allow"></div>

</a>

.room-item{
width:146px;
height: 206px;
float:left;
margin-right: 50px;


.avatar-box{
width: 142px;
height: 150px;
  position: relative;
.avatar{
width: 126px;
height: 126px;
position: absolute;
top:12px;
left:8px;
}
.bg{
width: 142px;
height: 150px;

}
.nickname{
color:#fff;
text-align: center;
position: absolute;
bottom:72px;
width:120px;
left:4px;
padding:0 5px;
font-size: 14px;
text-align: center;
}
}

IE7下图片无法点击，其他浏览器正常。

https://segmentfault.com/q/1010000000712673 这里有类似例子，HTML 4.01规定<a>只应包含inline元素，而<div>是一个block元素，不过HTML 5倒是不再这么要求了。这是因为a标签是属于行内元素，在老的游览器（包括ie7）中行内元素内部不能放块元素。

修改后的代码：a加了display:block;position:relative; p标签换成span

html:

<a class="room-item not-got" href="/room/13001.htm" target="_blank">
<span class="avatar-box">
<img src="$imagePrefix/201612_snowflower_pc/snow.png" class="avatar">
<img src="$imagePrefix/201612_snowflower_pc/avatar_frame.png" class="bg">
<span class="nickname ellipsis">1昵称要尽量很长哦</span>
</span>
<div class="send-btn not-allow"></div>
</a>

sass:

.room-item{
width:146px;
height: 206px;
float:left;
margin-right: 50px;
display: block;
position: relative;
.avatar-box{
width: 142px;
height: 150px;

.avatar{
width: 126px;
height: 126px;
position: absolute;
top:12px;
left:8px;
}
.bg{
width: 142px;
height: 150px;

}
.nickname{
color:#fff;
text-align: center;
position: absolute;
bottom:72px;
width:120px;
left:4px;
padding:0 5px;
font-size: 14px;
text-align: center;
}
}

0 0