是否有可能使em单元在具有不同字体大小的元素上表现一致

Question

我经常发现自己想要对齐两个不同大小的文本行。基本上，即使文本大小不同，试图让行高保持不变。当使用em作为line-height之类的单位时，这会非常棘手，因为它会引用该特定元素的em大小。在设计line-heightpx可以很容易，但它试图设计响应时引入其他问题。

在下面的例子中，假定在左边的BIG TEXT是<h1>或东西设置为具有较大的相对font-size像200％，而small text是像一个用font-size:150%小。

BAD：

______________________  _______________________ 

          small text with 2em lin 
BIG TEXT WITH 2em LINE  _______________________ 
______________________ 

（这不会工作，因为2×200％EMS是不一样的2×150％EMS）

GOOD（但不响应）

______________________  _______________________ 


BIG TEXT WITH 40px LINE  small text with 40px line 
______________________  _______________________ 

这是有效的，因为px单位不关心文本的大小，但这也引入了一个问题，我如果你想做一些事情，比如用一个媒体查询在较小的屏幕上缩小字体大小。然后，您还必须管理行高，因为无论文本是否更改大小，领导都会得到修复。在大项目中，px投入em个单位也是令人困惑的。

有没有更好的办法解决这个问题，不需要固定的px单位？

PS：我用em来解释这个问题，但%也是因为它引用了当前元素的大小而不是父级的。

Answer 1

似乎你可以定义行高。

.ems-text { 
    font-size: 2em; 
    line-height: 40px; 
} 

.px-text { 
    font-size: 20px; 
    line-height: 40px; 
} 

Answer 2

CSS3带来了一个看起来像你想要的新功能。一个名为rem的新单元表示'root em'，它表示文档根级的em，因此它在所有元素中都是相同的。

JSFiddle

HTML

<div class="eg large">Some large text</div> 
<div class="eg small">Some large text</div> 

CSS

.eg { 
    float:left; 
} 

.large { 
    font-size:3em; 
    line-height:4rem; 
} 

.small { 
    font-size:1.5em; 
    line-height:4rem; 
} 

CSS-Tricks提出了向后兼容的策略（IE8及以下），基本上只是除了提供近似px值规则rem规则。

Answer 3

在CSS中不可能引用父级的字体大小（设置font-size时除外）。但是，如果您控制所有涉及的样式表，则可以间接处理这种情况。

例如，在你的“大”与“小”的元素的父元素em单位（例如，line-height: 2.4em）设置line-height并没有设置它在所有这些元素，使他们将继承计算值。例如：

<style> 
tr { line-height: 2.4em } 
h1 { font-size: 200%; margin: 0} 
.small { font-size: 150% } 
h1, .small { border: solid 1px } 
</style> 
<table > 
<tr><td><h1>BIG TEXT WITH 2em LINE</h1> 
<td><div class=small>small text with 2em lin</div> 
</table> 

的2.4em值意味着对于h1元件，行高度将等于1.2倍其自身的字体大小。

请注意，文字的基线不会对齐。这是具有不同字体大小但行高相等的直接结果（这是问题所要求的）。