HTML <small> 标签如何影响 CSS line-height 属性？答案

【问题标题】：How can HTML <small> tag affect the CSS line-height property?HTML <small> 标签如何影响 CSS line-height 属性？
【发布时间】：2014-12-07 16:03:22
【问题描述】：

第一个li 的高度是45px。第二个li 是46px。为什么？

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  display: block;
  text-decoration: none;
  background-color: #ff6a00;
}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">dfdd</a>
    </li>
    <li>
      <a href="#"><small>sdaf</small>abc</a>
    </li>
  </ul>
</div>

【问题讨论】：

因为<small>文本的半前导比它共享行的支柱的半前导大1px，所以从支柱顶部到底部的距离文本的行内框比它们各自的行高大 1px。
我在浏览器中don't see this being the case。两个 LI 元素的高度均为 45 像素。您能否在问题中包含浏览器信息以及可能显示 46 像素高度的屏幕截图？
您可以使用vertical-align: top 或vertical-align: bottom 修复它。
@MichaelT 第二个比第一个高 1 像素（至少在 Firefox 上）。但是 devtools 说两者都有计算 line-height 的 45px。
@Alohci 如何解决这个问题？我添加了垂直对齐，但无效

标签： html css font-size

【解决方案1】：

另一种解决方案是将display:block; 更改为display:flex; for <a> 标签。

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  /* REMOVED */
  /*display: block;*/
  display: flex; /* added*/
  text-decoration: none;
  background-color: #ff6a00;

}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">dfdd</a>
    </li>
    <li>
      <a href="#"><small>sdaf</small>abc</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

我完全同意@Alochi。半领先是罪魁祸首。 Read this 了解有关半领先及其计算方式的更多信息。

解决此问题的方法是将height:45px; 添加到您的<a> 标记中。

div {
  height: 45px;
  line-height: 45px;
  background-color: #b6ff00;
}
li {
  line-height: 45px;
  list-style: none;
  float: left;
}
li > a {
  width: 200px;
  line-height: inherit;
  display: block;
  text-decoration: none;
  background-color: #ff6a00;
  height:45px; /* ADDED*/
  
}
li:first-child > a {
  background-color: #00ffff;
}

<div>
  <ul>
    <li>
      <a href="#">AAAA</a>
    </li>
    <li>
      <a href="#"><small>AAAA</small>AAA</a>
    </li>
  </ul>
</div>

【讨论】：