font-size如何在這里不起作用？
[英]How is font-size not working here?
問題描述
按照你需要知道的6個最重要的CSS技術的建議，我將我的身體的font-size為62.5% ， container div的font-size為1.4 em（與文章略有不同）。 p.tags和p.published的font-size設置為1em。
但是，這對我不起作用。 p.tags和p.published的普通文本和文本都是相同的大小（由Firebug計算的16.8px）。 你能解釋為什么我的代碼不起作用嗎？ 我在Firefox 3.6.3中測試。 作者顯示的示例頁面在同一瀏覽器中工作正常。
我已經復制了下面的整個頁面 - 道歉的長度，但我認為最好不要遺漏任何東西。
<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>
2 個解決方案
解決方案1
12 已采納 2010-05-12 09:50:40
您的<p class="tags">和<p class="published">元素位於container div內，其字體大小為1.4em ，也位於posts div中，字體大小為1.2em 。 我認為將段落的字體大小設置為1em並沒有真正做任何事情，因為em單位是累積的。 因此，如果你的“root”字體大小是62.5％，那么第一個div的增加40％，第二個div增加20％。 您的兩個段落也將具有此字體大小，因為它們不會增加或減小大小。
基本上，如果您希望“標簽”和“已發布”段落具有較小的文本，請為它們提供小於1的大小，例如0.9em 。 這將使它們的大小比同一父div中的其他元素小10％。
解決方案2
1 2010-05-12 09:58:40
格雷厄姆是對的，我定了;
p.tags, p.published {
font-size: 0.5em;
}
這改變了字體大小。 更新了Jsfiddle她的 e。
EM根據正文字體的基本大小計算。 看這里有關如何工作的解釋:)
字體大小無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.