为什么我的图像链接具有这个形状怪异的轮廓？

我不介意出现边框，只是我不喜欢的顶部奇怪的一点。我知道我可以解决这个问题，通过使用完全摆脱边界outline: 0，但是我也知道这很糟糕。

HTML设置是

<li>
<a href='..'><img alt='..' src='..'/></a>
<a href='..'>...</a>
</li>

CSS摘录：

li{
    display: block;
    width: 9em;
    margin-right: 1em;
    height: 12em;
    text-align: center;
}

li img{
    height: 8em;
    display: block;
    margin: 0 auto;
}

（如果将两者合并为一个，则效果相似<a>。）

我认为这与display: block在图像上使用有关。我在这里重现了这个问题：http : //jsfiddle.net/pvd69wce/