CSS 行高/H1 字体大小

Question

我不太确定是什么导致 line-height 在每个浏览器中显示不同。

谁能告诉我如何修复它？

body {
  font-family: "Tahoma", sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 0;
  line-height: 1.428571429;
  width: 100%;
  height: 100%;
} 

h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   padding: 0;
}

h1 {
   font-size: 2em;
}

<h1 style="text-align:center">
<span style="font-size:18px">This is a textbox</span>
</h1>

Answer 1

这是因为您的 h1 元素使用的是浏览器默认的 font-size 本身，您没有考虑到这一点。例如，在 Chrome 中，h1 元素的默认 font-size 为 2em - 大于 18px 在你的 span 元素上。如果 h1 元素的 font-size 默认小于 18px，则 的整体高度h1 元素将为 25px。

为了避免这种情况，我们可以将 h1 元素的 font-size 设置为 initial:

h1 {
    font-size: initial;
}