Html 字体大小在这里不起作用怎么办？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2817531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How is font-size not working here?
提问by markvgti
Following advice in The 6 Most Important CSS Techniques You Need To Know, I set my body's font-sizeto 62.5%, the containerdiv's font-sizeto 1.4 em (slight variation from the article). p.tagsand p.published's font-sizeis set to 1em.
按照The 6 Most Important CSS Techniques You Need To Know 中的建议，我将 body 设置font-size为62.5%，containerdiv 设置font-size为 1.4 em（与文章略有不同）。p.tags并且p.published'sfont-size设置为 1em。
However, this doesn't work for me. Both the normal text and text in p.tagsand p.publishedcomes out to be the same size (16.8px as computed by Firebug). Can you explain why my code isn't working? I am testing in Firefox 3.6.3. The sample pageshown by the author works just fine in the very same browser.
但是，这对我不起作用。普通文本和文本输入p.tags和p.published输出的大小相同（由 Firebug 计算为 16.8px）。你能解释为什么我的代码不起作用吗？我正在 Firefox 3.6.3 中进行测试。作者展示的示例页面在同一个浏览器中运行良好。
I've reproduced the entire page below—apologies for the length of it, but I thought it better to not leave out anything.
我已经复制了下面的整个页面 - 为它的长度道歉，但我认为最好不要遗漏任何内容。
<html>
<head>
<title>Title</title>
<style type="text/css">
body {
font-family: Georgia, "Century Schoolbook", "Times New Roman", Serif;
font-size: 62.5%;
background-color: #2B3856; /* Dark slate blue */
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Helvetica, Tahoma, "Sans Serif";
color: #2B3856;
margin-top: 2px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #2B3856;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration: underline;
}
div#container {
width: 800px;
font-size: 1.4em;
margin: 5px auto;
background-color: #E3E4FA; /* Lavender */
}
#sidebar {
width: 200px;
float: right;
margin: 0px;
padding: 0px;
}
#sidebar div {
padding: 0 5px 5px;
}
#sidebar div.shadowbox { margin-right: 5px; }
#content {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#header {
/*background-color: white;*/
background-color: #2B3856; /* #E3E4FA; Lavender */
margin-bottom: 5px;
height: 100px;
}
#header h1 {
color: #B93B8F; /* Plum */
line-height: 100px;
text-align: center;
font-size: 45px;
}
#description {
color: #7D1B7E /* Dark Orchid */
}
a {
text-decoration: underline;
color: #153E7E;
}
a:hover {
text-decoration: none;
}
div#posts {
padding: 0px;
font-size: 1.2em;
margin: 0px;
}
div#posts div.post {
padding: 5px;
margin: 0px 5px 15px 5px;
}
p.tags, p.published {
font-size: 1em;
}
.shadowbox {
background: repeat 0 0 url('http://www.jawsalgorhythmics.com/images/darkness-100x100-10pct.png');
}
.justifycenter { text-align: center; }
.floatright { float:right; }
.floatleft { float: left; }
.clearright { clear: right; }
.clearleft { clear:left; }
.clearboth { clear: both; }
.halfsidebarwidth { width: 82px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Odds 'n Ends</h1>
</div> <!-- header -->
<div id="sidebar">
<div class="shadowbox">
<br /><p class="justifycenter"><img width="64" height="64" src="{PortraitURL-64}" /></p>
<div class="floatleft halfsidebarwidth"><a href="/archive" class="archive">Archives</a></div>
<div class="floatleft halfsidebarwidth"><a href="{RSS}" class="rss">RSS</a></div>
<div class="clearboth"></div>
</div>
</div> <!-- sidebar -->
<div id="content">
<div id="posts">
<div class="post shadowbox">
<span class="quote">
"It does not matter how slow you go so long as you do not stop."
<div class="source">Wisdom of <a href="#" title="http://en.wikipedia.org/wiki/Confucius">Confucius</a></div>
</span>
<p class="tags">Tags: #<a href="#" title="http://demo.tumblr.com/tagged/wisdom">wisdom</a> </p>
<p class="published">Posted: Nov 08, 2006 at 2:27 pm
<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a> <a href="#" title="http://tumblr.com/xr06k">Short URL</a></p>
</div>
</div> <!-- posts -->
</div> <!-- content -->
<div class="clearboth"></div>
<div id="footer" style="text-align: justify;">
<h1>The footer</h1>
</div>
</div> <!-- container -->
</body>
</html>
回答by Graham Clark
Your <p class="tags">and <p class="published">elements are inside the containerdiv, which has a font size of 1.4em, and also inside in the postsdiv, which has a font size of 1.2em. I think that setting the font size of the paragraphs to 1emdoesn't really do anything, as the emunit is cumulative. So if your "root" font size is 62.5%, it's going to be increased 40% for the first div, and increased another 20% for the second div. Your two paragraphs will also have this font size, as they aren't increasing or decreasing the size.
您的<p class="tags">和<p class="published">元素位于containerdiv 内，其字体大小为1.4em，也在postsdiv 内，其字体大小为1.2em。我认为将段落的字体大小设置为1em实际上没有任何作用，因为em单位是累积的。因此，如果您的“根”字号为 62.5%，那么第一个 div 的字体大小将增加 40%，第二个 div 的字体大小将增加 20%。您的两个段落也将具有此字体大小，因为它们不会增加或减少大小。
Basically, if you want the "tags" and "published" paragraphs to have smaller text, give them a size of less than one, e.g. 0.9em. This will give them a size 10% less than other elements in the same parent div.
基本上，如果您希望“标签”和“已发布”段落具有较小的文本，请将它们的大小设置为小于 1，例如0.9em. 这将使它们的大小比同一父 div 中的其他元素小 10%。
回答by Kyle
Graham was right, I set;
格雷厄姆是对的，我确定；
p.tags, p.published {
font-size: 0.5em;
}
And that changed the font size. Updated Jsfiddle here.
这改变了字体大小。更新了 Jsfiddle 她e。
The EM is calculated from the base size of the body font. Look herefor an explanation on how this works :)
EM 是根据正文字体的基本大小计算的。在此处查看有关其工作原理的解释:)
