font-size在这里不起作用？

按照The 6 Most Important CSS Techniques You Need To Know的建议，我将我的身体font-size设置为62.5%,container div的font-size设置为1.4 em（与文章略有差异）。 p.tags和p.published的font-size设置为1em。font-size在这里不起作用？

但是，这并不适用于我。 p.tags和p.published中的正常文本和文本都与Firebug计算的大小相同（16.8像素）。你能解释我的代码为什么不起作用吗？我正在测试Firefox 3.6.3。作者所示的sample page在同一个浏览器中工作得很好。

我已经复制了下面的整个页面 - 它的长度的道歉，但我认为最好不要忽略任何东西。

<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>&nbsp; </p> 

                 <p class="published">Posted: Nov 08, 2006 at 2:27 pm 
                   &nbsp;&nbsp;<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a>&nbsp;&nbsp; <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>

来源

2010-05-12 markvgti

使用这个而不是张贴HTML的整个列表：http://jsfiddle.net/JYfqL/。 – Kyle 2010-05-12 09:43:05

这对我来说似乎是一个毫无意义，可能是错误的“技术”。诸如“通过将主体字体大小设置为62.5％，将字体大小设置为10像素”这样的声明是错误的，我看不出它如何使网页设计变得更加简单或不同。它只会导致你遇到的问题。 – RoToRa 2010-05-12 09:56:22

你<p class="tags">和<p class="published">元素是container DIV，其具有1.4em字体大小，并且还里面在posts DIV，其具有1.2em字体大小的内部。我认为将段落的字体大小设置为1em并没有什么作用，因为em单位是累积的。因此，如果您的“根”字体大小为62.5％，则第一格将增加40％，第二格增加20％。你的两个段落也会有这个字体大小，因为它们不会增加或减少大小。

基本上，如果您希望“标签”和“已发布”的段落具有较小的文字，请为它们指定小于一个的大小，例如， 0.9em。这将使它们比同一父分区中的其他元素少10％。

来源

2010-05-12 09:50:40

你说得对，当然!!!! 这真的很愚蠢 - 我的大小是相对于祖先（s） - 他们都！所以当然效果是累积的。谢谢！ – markvgti 2010-05-12 10:03:42

格雷厄姆是对的，我确定了;

p.tags, p.published { 
    font-size: 0.5em; 
}

而且改变了字体大小。 e。

EM是从主体字体的基本大小计算出来的。 Look here关于这是如何工作的解释:)

来源

2010-05-12 09:58:40 Kyle

感谢您的文章链接。 – markvgti 2010-05-12 10:22:43

没问题:)希望它有帮助。 – Kyle 2010-05-12 10:36:17

font-size在这里不起作用？

回答

相关问题