如果將CSS字體大小應用於body元素，如何處理嵌套標記和繼承？

Question

我正在重新設計一個包含大量舊內容的網站。 主要的設計變化是使網站具有彈性以填充各種屏幕尺寸。 我在body元素中使用font-size作為執行此操作的機制並將任何測量設置為ems。 這可以按預期工作，但是當我找到一個同樣指定了font-size的嵌套元素時，我遇到了麻煩。 在下面的示例中，我將展示如何在ap標記內插入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。 這很少有意義（如果父元素字體大小是正常的復制文本大小，它通常會使字體太小），但最重要的是，如果你不是這個意思，就不要設置字體大小。

字體大小設置沒有神奇的治療方法（雖然有大量的蛇油被商品化）。 例如，如果您希望減少鏈接列表的字體大小 - 您不應該這樣做，但我們假設您這樣做 - 然后在包含列表的ul上設置font-size ，並保留它。 例如，在這樣的列表內a元素上設置縮小的字體大小也是毫無意義的（甚至是荒謬的）。

Answer 2

根據你想支持多少IE（IE9 +），我建議使用rem代表root em 。 這將消除em值對級聯的影響。 看看這篇文章： http ： //snook.ca/archives/html_and_css/font-size-with-rem