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在這裏不起作用？

回答

相關問題