CSS - 使用 em 的子字体大小答案

【问题标题】：CSS - child font-size using emCSS - 使用 em 的子字体大小
【发布时间】：2010-11-13 12:49:43
【问题描述】：

在使用不等于 1 的 em 时，使所有嵌套列表项大小相同的最有效方法是什么。例如，我希望此列表中的所有 li 的大小都为 ul 父级的 0.85em。我必须为每个深度“级别”创建一个单独的类吗？

<html>
<head>
    <style type="text/css">
        li
        {
            font-size: 0.85em;
        }
    </style>
</head>
<body>
    <ul>
        <li>Level 1 item
            <ul>
                <li>Level 2 item
                    <ul>
                        <li>Level 3 item</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

【问题讨论】：

标签： css font-size

【解决方案1】：

我希望此列表中的所有 li 的大小都为 ul 父级的 0.85em

body > ul { font-size: 0.85em; }

会这样做

【讨论】：

【解决方案2】：

li { font-size: 0.85em; }
li li { font-size: 1em; }

【讨论】：

【解决方案3】：

我的建议是给第一个 <ul> 一个 id 或类，并在那里设置 font-size。

【讨论】：

【解决方案4】：

（此答案假设您希望所有 li 元素的大小相同（您在问题中都说您想要相同的大小和不同的大小））

字体大小的级联，所以如果你只是将它设置在外部元素上（比如一个包装 div 或其他东西），它里面的所有东西都会像（我认为）你想要的那样变小。

<div id="navigation">
    <ul>
        <li>...</li>
        <li>
        <ul><li>...</li><li>...</li></ul>
        </li>
    </ul>
</div>

#navigation { font-size: 0.85em; }

【讨论】：

上面的例子可以正常工作。即使在 IE6 中，也不支持子选择器。
True - 我正在使用他给我们的 HTML。他没有指定浏览器兼容性，所以我假设他想要符合 CSS2.1 规范的东西。
他在问题的什么地方说他希望它们具有不同的尺寸？
“使所有嵌套列表项的大小相同”与“此列表中的所有 li 的大小都为 ul 父级的 0.85em”。我倾向于第一个，但我不能确定，出于某种原因，人们对我的回答投了反对票，所以我只是想澄清一下。
还不错；我不赞成您的回答，因为这似乎是一个真正的误解，而您的回答确实有效。但我认为这很清楚 - “使所有嵌套列表项的大小相同”意味着，我认为，“......彼此一样”。另一句话简单地说，它们都应该是基本字体大小的 0.85em 的计算值——我看不到不一致。

【解决方案5】：

应该可以。

li li {font-size: 100%;}

【讨论】：

可以，但不是最有效的方式。
@Bobby，为什么这不是最有效的方法？
不向页面添加额外标记，这是最简单的方法。

【解决方案6】：

我同意 Emil 的观点，如果我有足够的代表点数（此处为 n00b），我会投票支持他。我会使用他在第一点中提到的类，因此它可以在同一个文档中重复使用。如果你想要跨浏览器并使用当前的 css 规范，那么我不能推荐一个更好的现实世界的例子.....滚动 css 3 和 IE6 的死亡！

【讨论】：

感谢您的精神支持！ :)
我就是这样做的，我认为因为你是正确的并给出好的建议而将你贬低是不公平的

【解决方案7】：

字体大小使用“rem”单位。这解决了字体继承问题。

Johnathan Snook 对此有一个 great article。

【讨论】：

是的，这确实是最好的方法。我只能添加你应该使用像素的后备值。像这样：li {font-size: 8.5px; font-size: 0.85em;} 而且你不应该像往常一样在 body 元素上设置基本字体大小，而是在 html 上。
@MikeEshva: 你的 CSS 例子应该是 {font-size: 8.5px;字体大小：0.85rem;}
请注意，“rem”仅适用于 IE9+