html - 为什么我的图像链接有这种形状怪异的轮廓？

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

如果您不想删除轮廓，一种解决方案是提供 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> 时，额外的行从何而来？不是内联 block 。