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

代码：

<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;

                    }

                  }