css – 字体大小继承的最佳做法

我遇到的问题是字体大小的继承,并且正在寻找此问题的最佳做法.

这就是我现在解决的问题.

jsfiddle for your viewing pleasure

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>​

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a,li a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,dl a,blockquote a,dt a,dd a,td a {
    font-size:1em !important;
}

我明白em与父字体大小有关.所以如果我设置p {font-size：1.5em;}并且还设置：link {font-size：1.5em;}和我的< a>在我的< p>之外那么他们将有相同的相对大小,很棒.

但是,如果我然后将< a>在< p>内嵌入的< a>的字体大小现在更大,因为它是1.5em大于< p>.为了克服这个,我用p a,… {font-size：1em！important;}的字符串设置最后一个样式.因为a：链接的特异性比只有p我不得不使用！重要(不是重要的粉丝),我也不能使用font-size：inherit;正如我们必须支持的,我敢说,ie6(仍然有15％的流量,我们是生物技术,一些公司只是拒绝升级).

所以我的问题是这样的.我是否正在处理标签内的标签,以防止我的排版分解？一旦我写了自己想到的最后一个风格,这可以成为维护的噩梦！我想使用rem,但浏览器支持不是一部分用户.

你如何在你自己的css中解决这个问题,这将是一个“最佳实践”的方法.