字体大小继承的最佳实践

Question

致力于将我们公司的网站转换为更具响应性的内容,以便重新css使用em而不是尝试和真实px.

我font-size遇到的问题是继承并正在寻找这个问题的最佳实践.

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

jsfiddle为您的观赏乐趣

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与父母有关font-size.因此,如果我设置p{font-size:1.5em;}并设置a:link{font-size:1.5em;}并且我<a>在我之外,<p>那么它们将具有相同的相对大小,非常好.

但是如果我然后放入一个<a>内部<p>,嵌入的字体大小<a>现在更大,因为它1.5em比它大<p>.为了克服这个问题,我用一串字符串设置了最后一个样式p a, li a, h1 a,......{font-size:1em !important;}.由于a:link具有比p a我必须使用的更高的特异性!important(不是粉丝!important),我也不能使用,font-size:inherit;因为我们必须支持,我敢说,ie6(仍然有15%的流量,我们是生物技术和一些公司只是拒绝升级).

所以我的问题是这个.我是否正确地处理标签内部的标签,以防止我的排版分手？我一想到自己想到的最后一种风格,这就成了维持的噩梦!我想使用,rem但浏览器支持不适用于部分用户.

你如何在自己的CSS中解决这个问题,以及什么是"最佳实践"方法.

Answer 1

仅设置块的字体大小,例如标题和导航块.更改内联字体会导致混乱,因此不要为链接设置字体大小.取而代之的是,当需要时,设置的字体大小ul或div包含导航链接或其他元件.

通常,尽可能少地使用font-size设置,以尽量减少不必要的累积效应的风险.

笔记:

这根本不是继承.在font-size元素上设置时,元素肯定不会继承字体大小.这是关于em单位的相对性质的影响.

如果您已设置a:link{font-size:1.5em;}为例如,您可以轻松地覆盖段落内的链接而不使用!important.你必须更具体,这里的自然方式是p a:link{font-size:1em;}.