Em级联问题

Question

我有一个问题正在转动我的脑袋。到目前为止，我或多或少地相处得很好，但在这里我遇到了一个讨厌的人。

我做了一个简化的标记示例。我在<a>

中有<h2>

Demo

HTML

<h2>
    <a>This is title</h2>
<h2>

CSS

h2{
    font-size: 2em;
}

a{
    font-size: 1.5em;
}

现在我想将<a>标记放在<h2>内，但它太大了，因为em单位与其父级相对。有办法解决吗？谢谢大家。

Answer 1

完全同意Torazaburo。 rem设置相对于根元素的大小，而不是父元素，因此如果您为html元素定义大小，则rem元素将从中获取大小（您不需要定义html元素的大小，你可以让用户浏览器确定它。）

css-tricks.com

上有关于rem的好文章

Answer 2

嗯，您已选择使用em，以及它们的工作方式。你铺床，然后躺在床上。

如评论中所述，如果没有IE8支持，可以使用rem。

否则，它会回到px。那问题是什么？如果您正在使用CSS预处理器，则可以将该值设置为变量，从而可以轻松更改或依赖其他内容。

Answer 3

如果字体太大，请将其设置得更小。认真。当您将字体大小设置为1.5em时，表示，您将其设置为父元素字体大小的1.5倍。如果您不想这样，请将其设置为其他值。如果你想要它是基​​本字体大小的1.5倍，而父元素的字体大小是基本字体大小的两倍，那么只需计算1.5 / 2，即设置font-size: 0.75em。

没有理由改变工作不太可靠或灵活性较差的单位。只需根据其定义使用em。

然后，在标题或中添加链接以更改标题内的字体大小很少是个好主意。但从技术上讲，它可以完成，通常只需要一次除法操作。

Answer 4

或者您可以尝试继承到最近的父母。

HTML

<h2>
  <a>This is title</h2>
<h2>

CSS

h2{
    font-size: 2em;
}
h2 a{
    font-size: inherit;
}