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

Question

我不介意边界出现,它只是我不喜欢的顶部奇怪的位置.我知道我可以解决这个问题,通过使用完全摆脱边界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/

Answer 1

如果您不想删除轮廓，一种解决方案是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>不是内联块时，额外的行确实来自哪里。