In che modo la dimensione del carattere non funziona qui?

In seguito a un consiglio su The 6 Most Important CSS Techniques You Need To Know, ho impostato il numero font-size del mio corpo a 62.5%, il font-size div a 1,4 em (variazione minima dall'articolo) container div. p.tags e p.published 's font-size è impostato su 1em.In che modo la dimensione del carattere non funziona qui?

Tuttavia, questo non funziona per me. Sia il testo normale che il testo in p.tags e p.published hanno la stessa dimensione (16,8 bit come calcolato da Firebug). Puoi spiegare perché il mio codice non funziona? Sto testando su Firefox 3.6.3. Lo sample page mostrato dall'autore funziona perfettamente nello stesso browser.

Ho riprodotto l'intera pagina sotto-scuse per la lunghezza di esso, ma ho pensato che fosse meglio non tralasciare nulla.

<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>

fonte

2010-05-12 markvgti

Utilizzare questo invece di pubblicare un intero elenco di HTML: http://jsfiddle.net/JYfqL/. – Kyle

Sembra una "tecnica" inutile e forse sbagliata per me. Dichiarazioni come "Impostando la dimensione del carattere del corpo al 62,5%, che imposterà la dimensione del font a 10 pixel" sono errate e non riesco a vedere come questo rende il web design più facile o diverso. Porta solo a problemi come te. – RoToRa

vostri <p class="tags"> e <p class="published"> elementi sono all'interno del container div, che ha una dimensione di carattere di 1.4em, e anche all'interno della posts div, che ha una dimensione di carattere di 1.2em. Penso che l'impostazione della dimensione del carattere dei paragrafi su 1em non faccia nulla, in quanto l'unità em è cumulativa. Quindi, se la dimensione del carattere "root" è del 62,5%, sarà aumentata del 40% per il primo div e aumentata del 20% per il secondo div. I tuoi due paragrafi avranno anche questa dimensione, poiché non aumentano o diminuiscono le dimensioni.

In sostanza, se si desidera che i paragrafi "tag" e "pubblicati" abbiano un testo più piccolo, fornire loro una dimensione inferiore a uno, ad es. 0.9em. Questo darà loro una dimensione del 10% in meno rispetto ad altri elementi nella stessa div genitore.

fonte

2010-05-12 09:50:40

Hai ragione, certo !!!! Questo è stato davvero stupido da parte mia - la dimensione dell'em è relativa agli antenati - tutti quanti !!! Quindi, naturalmente, l'effetto è cumulativo. Grazie! – markvgti

Graham aveva ragione, ho impostato;

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

E che ha cambiato la dimensione del carattere. Updated Jsfiddle her e.

Il valore EM viene calcolato dalla dimensione base del carattere del corpo. Look here per una spiegazione su come funziona :)

fonte

2010-05-12 09:58:40 Kyle

Grazie per il collegamento dell'articolo. – markvgti

Nessun problema :) Spero che aiuti. – Kyle

In che modo la dimensione del carattere non funziona qui?

risposta

Problemi correlati