Comment font-size pas de travail ici?

Conseils suivants Les 6 Plus Importants des Techniques CSS que Vous Devez Savoir, j'ai mis mon corps font-size à 62.5%, le container div à l' font-size à 1.4 em (légère variation de l'article). p.tags et p.published's font-size est fixé à cadratin (1 em.

Toutefois, cela ne fonctionne pas pour moi. Les deux à la normale de texte et le texte en p.tags et p.published vient à être de la même taille (16.8 px calculé par Firebug). Pouvez-vous expliquer pourquoi mon code ne fonctionne pas? Je suis en train de tester sous Firefox 3.6.3. Le exemple de page illustré par l'auteur fonctionne très bien dans le même navigateur.

J'ai reproduit l'intégralité de la page ci-dessous—toutes mes excuses pour la longueur de celui-ci, mais j'ai jugé préférable de ne pas laisser quoi que ce soit.

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

Utiliser ce lieu de poster une liste de HTML: jsfiddle.net/JYfqL.
Cela me semble inutile et éventuellement de mal "technique" pour moi. Des déclarations telles que "Par la définition de la police du corps de texte de taille à 62,5%, qui permettra de définir votre taille de police de 10 pixels" sont fausses et je ne vois pas comment il font de la conception web plus facile ou différents. Il a juste conduit à des problèmes tels que vous rencontrez.

OriginalL'auteur markvgti | 2010-05-12

11

Votre <p class="tags"> et <p class="published"> éléments sont à l'intérieur de la container div, qui a une taille de police de 1.4em, et aussi à l'intérieur dans le posts div, qui a une taille de police de 1.2em. Je pense que le réglage de la taille de la police des paragraphes 1em ne pas vraiment faire quelque chose, comme le em unité est cumulatif. Donc, si votre "root" taille de la police est de 62,5%, ça va être augmenté de 40% pour le premier div, et l'augmentation de 20% pour la deuxième div. Vos deux paragraphes ont également cette taille de police, qu'ils ne sont pas en augmentant ou en diminuant la taille.

En gros, si vous voulez que les "tags" et "publié" les paragraphes à avoir de petits textes, de leur donner une taille de moins l'un, p. ex. 0.9em. Cela leur donnera une taille de 10% de moins que les autres éléments de la même div parent.

Vous avez raison, bien sûr!!!! C'était vraiment stupide de moi—em est la taille par rapport à l'ancêtre(s)—tous!!! Alors, bien sûr, l'effet est cumulatif. Merci!

OriginalL'auteur Graham Clark
1

Graham a droite, j'ai mis;
```
p.tags, p.published {
font-size: 0.5em;
}
```
Et qui a changé la taille de la police. Mise à jour Jsfiddle sone.

L'EM est calculée à partir de la base de la taille de la police du corps de texte. Regardez ici pour une explication sur la façon dont cela fonctionne 🙂

Merci pour le lien de l'article.
Pas de problème 🙂 j'Espère que ça aide.

OriginalL'auteur Kyle

Vous devez vous connecter pour publier un commentaire.