Chrome与其他浏览器的CSS问题

Question

在这里直播链接 http://soloveich.com/pr1-1/

有三个图像链接更靠近页面的内容部分。 当悬停时，图像的底部部分在Chrome中的哪个位置？ 看了一会儿，还是想不通。

<ul>
    <li><a class="ml" href="#"><div class="tabs1"><div id="t1">
    </div></div>
    </a></li>        
    <li class="tabs2"><a class="ml" href="#"><div class="tabs1"> <div id="t2">
    </div></div>
    </a></li>
    <li class="tabs2"><a class="ml" href="#"><div class="tabs1"><div id="t3">
    </div></div>
   </a></li>  
</ul>

和css

#tabs {
margin-top: 400px;
position: absolute;
}
#tabs ul li {
display: inline;
float: left;
}
.tabs1 {
height:200px;
width: 353px;
background-color: #fff;
border-top-style: solid;
border-top-color: #D4360C;
border-top-width: 4px;
}

.tabs2 {
margin-left: 40px;
}

#t1 {
height: 256px;
width: 353px;
background-image: url(images/t1.png);
background-repeat: no-repeat;
}
#t1:hover {
background-image: url(images/t1r.png);
}

#t2 {
height: 256px;
width: 353px;
background-image: url(images/t2.png);
background-repeat: no-repeat;
}
#t2:hover {
background-image: url(images/t2r.png);
}

#t3 {
height: 256px;
width: 353px;
background-image: url(images/t3.png);
background-repeat: no-repeat;
}
#t3:hover {
background-image: url(images/t3r.png);
}