为什么我的图片链接会有这种形状怪异的轮廓？

Question

我不介意边框出现，它只是我不喜欢顶部的奇怪位置。我知道我可以解决这个问题，使用outline: 0完全摆脱边界，但我也知道that's bad。

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/

Answer 1

另一种可以考虑假设链接是否位于同一位置的替代方法是将outline:none添加到链接中，同时在图像上添加悬停/焦点效果以突出显示其下方的链接以帮助可访问性

Codepen http://codepen.io/noobskie/pen/ojXYgo

Answer 2

如果您不想删除大纲，一种解决方案是将display:inline-block提交给<a>。

li {
  display: block;
  width: 9em;
  margin-right: 1em;
  height: 12em;
  text-align: center;
}
li a {
  display: inline-block;
}
li img {
  height: 8em;
  display: block;
  margin: 0 auto;
}

<ul>
  <li>
    <a href='#'>
      <img alt='' src='https://upload.wikimedia.org/wikipedia/commons/e/e2/Merton_College_Oxford_Coat_Of_Arms.svg' />
    </a>
    <a href='##'>Merton</a>
  </li>
</ul>

说实话，我并不完全确定为什么这种方法很有效。事实上，当<a>不是内联块时，额外的行来自何处​​。