当相对行高被继承时，它不是相对于元素的字体大小。为什么？我该如何让它相对？

问题描述

我有一个全局重置设置 c>，我定义不同的字体大小：

  h1 {
 font-size：4em; } 
  

我希望 h1 继承相对 line-height 1.25em 。生成的行高应该等于80px（16×4×1.25）。

但实际上 h1 line-height 保持等于 20px （与 html 's：16 x 1.25 = 20）。

说，我有以下HTML：

b $ b

 < p> foo< br> bar< / p> 
< h1> foo< br> bar< / h1> 
  

结果截图：

img src =https://i.stack.imgur.com/g0Dxd.pngalt =相对行高不正确地继承>

看来，相对值首先计算为绝对值，然后绝对值被继承。或者也许它相对于父项的 font-size 而不是元素的 font-size

问题

1. 为什么是相对的 line-height 继承不正确？


2. 如何使相对 line-height 作为相对于元素的<$ http://stackoverflow.com/questions/14483372/wrong-rendering-of-inherited-line-height\">问题在标题中有类似的问题，但细节不同。
   解决方案

   当使用 em 行高的值时，计算行高的值，并且是子元素也使用的计算值。

   
   
   

   如果使用裸数，则它是用于计算子元素的比率

   
   
   

   因此使用 line-height：1.25; 而不是 -height：1.25em;

   
   

   I have a global reset that sets font-size and line-height to inherit for every element:

   * {
     font-size:   inherit;
     line-height: iherit; }
   

   For html, i define them explicitly:

   html {
     font-size:   16px;
     line-height: 1.25em; } /* 16×1.25 = 20 */
   

   Note, that line-height is set in a relative unit.

   For h1, i define different font-size:

   h1 {
     font-size: 4em; }
   

   I expect h1 to inherit the relative line-height of 1.25em. The resulting line-height should be equal to 80px (16×4×1.25).

   But in reality h1's line-height remains equal to 20px (that's the same as html's: 16×1.25=20).

   Say, i have the following HTML:

   <p>foo<br>bar</p>
   <h1>foo<br>bar</h1>
   

   Screenshot of the result:

   http://jsfiddle.net/M3t5y/5/

   To work around this problem, i have to define h1's line-height explicitly equal to the same value that it inherits:

   h1 {
     font-size:   4em;
     line-height: 1.25em; }
   

   Then line-height becomes correct:

   http://jsfiddle.net/M3t5y/6/

   It looks like the relative value is first calculated into the absolute value and then the absolute value is inherited. Or maybe it is inherited relative to the parent's font-size, not the element's font-size.

   Questions

   1. Why is the relative line-height inherited incorrectly?
   2. How do make the relative line-height be inherited as a value relative to the element's font-size, not its parent's?

   PS There's a question with a similar problem in its title, but it is different in detail.

   解决方案

   When you use em values for line height, the value of the line height is computed, and it is that computed value which is also used by child elements.

   If you use a bare number instead, it is the ratio that is used for the calculation of child element line-heights.

   So use line-height:1.25; instead of line-height:1.25em;

   这篇关于当相对行高被继承时，它不是相对于元素的字体大小。为什么？我该如何让它相对？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！