Question

我正在重新设计一个包含大量旧内容的网站。主要的设计变化是使网站具有弹性以填充各种屏幕尺寸。我在body元素中使用font-size作为执行此操作的机制并将任何测量设置为ems。这可以按预期工作，但是当我找到一个同样指定了font-size的嵌套元素时，我遇到了麻烦。在下面的示例中，我将展示如何在p标记内部插入span标记，该标记具有分配了font-size的类，这会导致font-size被继承并基本上应用两次。我知道这是如何工作的，但我该如何处理呢？我通过链接和列表以及用于粗体文本的样式遇到了很多。

将主体设置为1em的原因是我可以检测屏幕分辨率并更改字体大小的值，以使整个设计缩小或按比例增长。所有设计元素都已从px转换为em。

这里很好的例子：http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

我认为唯一的解决方法是编辑现有帖子并更新用于新帖子的样式。有数百个帖子......真的希望有些东西我不知道。

这是一个基本的例子。有什么建议吗？

    <style type="text/css">
    html {
        font-size:100%;
    }
    body {
        font-size:1em;
    }
    .smalltext, ul, a {
        font-family: "Century Gothic", Arial, sans-serif;
        font-size: .75em;
    }
    .boldNavy {
        font-family: "Century Gothic", Arial, sans-serif;
        font-size: .75em;
        font-weight:bold;
        color:navy;
    }
    </style>

    <div>
      <p class="boldNavy">Here is the bold text as it should appear</p>
      <p><a href="#">A Link as it should appear</a></p>
      <p class="smalltext">Text as it should appear, now look at what happens when you put tags inside each other.</p>
      <p class="smalltext"><span class="boldNavy">The bold text is smaller here since it is inheriting font-size from the p tag.</span> this is my regular text <a href="#">and a link</a>.  The paragraph goes on and on...</p>
      <ul>
        <li><span class="boldNavy">Bullet List 1</span><br />
          This is the description and <a href="#">a link</a></li>
        <li><span class="boldNavy">Bullet List 2</span><br />
          This is the description and <a href="#">a link</a></li>
      </ul>
    </div>

Answer 1

设置，例如font-size: .75em不会导致继承。恰恰相反：阻止继承。但它将字体大小设置为父元素字体大小的3/4。这很少有意义（如果父元素字体大小是正常的复制文本大小，通常会使字体太小），但最重要的是，如果你不是这样的话，就不要设置字体大小。

字体大小设置没有神奇的治疗方法（虽然有大量的蛇油被商品化）。例如，如果您希望减少链接列表的字体大小 - 您不应该这样做，但我们假设您这样做 - 然后在包含该列表的font-size上设置ul，并保留它。例如，还在这样的列表中的a元素上设置缩小的字体大小是毫无意义的（甚至是荒谬的）。

Answer 2

根据您要支持的IE数量（IE9 +），我建议使用代表根rem的{{1}}。这将消除您使用em值获得的级联效果。看看这篇文章：http://snook.ca/archives/html_and_css/font-size-with-rem

如果将CSS字体大小应用于body元素，如何处理嵌套标记和继承？

2 个答案: