时间戳

首页 > 解决方案 > 为什么这些跨度的高度呈现不同？

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

问题描述

我注意到跨度的高度根据选择的字体系列和父对象的不同而不同。例如，对于 font-size: 14px 和 font-family: Helvetica 或 Arial，跨度在 a 中的高度为 17px，button在a. 使用 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>

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

标签： htmlcsssafari

解决方案

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

推荐阅读