代码:
<a class="room-item not-got" href="/room/13001.htm" target="_blank">
<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;
}
}