为啥ie下的鼠标移入图片时，会往下挤一个像素，移出又复原？

Question

不管是ie edge 还是ie6都出现这个问题。
html 如下

<li><a href="#"><img src="img/pic-list/2.gif" alt=""></a>
<h3>产品名称</h3>
<p>Price: <span>￥12.99</span></p>
</li>

css如下

.pic-list a {
    display: inline-block;
    width: 154px;
    height: 114px;
    border: 1px solid#c6c6c6;
    margin-bottom: 8px;
}
.pic-list a:hover {
    border: 1px solid #847f7f;
    }

当我不给a标签下加border的时候，只给移入加border才会出现向下挤的问题

Answer 1

因为你不加border时border为零，你移入时border 变为1！所以就下移了！好好看看盒子模型！

Answer 2

把.pic-list a:hover { border: 1px solid #847f7f; }改为.pic-list a:hover { border-color:#847f7f; }试试