html - 为什么这些跨度的高度呈现不同？

Question

我注意到 span 的高度根据所选的字体系列和父对象呈现不同。例如，对于字体大小:14px 和字体系列:Helvetica 或 Arial，跨度在 button 中的高度为 17px，但在 a 中的高度为 16px。对于 Verdana，两个跨度的高度都是 17px。

这是一个例子:

div.arial {
  font-family: Arial;
}
div.helvetica {
  font-family: Helvetica;
}
div.verdana {	
  font-family: Verdana;
}
button,
a  {
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
}
button {
  background: none;
  margin: 0;
  padding: 0;
  border: none;
}

<div class="arial">
  <button>
    <span>arial button 17px</span>
  </button>
  <a href="#">
    <span>arial anchor 16px?</span>
  </a>
</div>
<div class="helvetica">
  <button>
    <span>helvetica button 17px</span>
  </button>
  <a href="#">
    <span>helvetica anchor 16px?</span>
  </a>
</div>
<div class="verdana">
  <button>
    <span>verdana button 17px</span>
  </button>
  <a href="#">
    <span>verdana anchor 17px</span>
  </a>
</div>

为什么会这样？有一些解决方法吗？

Answer 1

尝试在 button 和 a 标签上设置 display: inline-block 和高度。