<small>标签如何影响CSS线高属性？

Question

第一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>

​

Answer 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>

​

Answer 2

我完全同意@Alochi。半领先才是罪魁祸首。了解更多关于半领先和如何计算的阅读这篇文章。

解决这个问题的方法是在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>

​