Как размер шрифта здесь не работает? - PullRequest
10 голосов
/ 12 мая 2010

Следуя совету в 6 наиболее важных техник CSS, которые вам нужно знать , я установил font-size моего тела на 62.5%, font-size div'а *1006* на 1,4 em (небольшое отклонение от статья). p.tags и p.published s font-size установлены на 1em.

Однако, это не работает для меня. И обычный текст, и текст в p.tags и p.published имеют одинаковый размер (16,8 пикселя, как вычислено Firebug). Можете ли вы объяснить, почему мой код не работает? Я тестирую в 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>&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>

Ответы [ 2 ]

12 голосов
/ 12 мая 2010

Ваши элементы <p class="tags"> и <p class="published"> находятся внутри элемента container, который имеет размер шрифта 1.4em, а также внутри элемента posts, который имеет размер шрифта 1.2em. Я думаю, что установка размера шрифта абзацев на 1em на самом деле ничего не делает, так как блок em является кумулятивным. Таким образом, если размер вашего «корневого» шрифта составляет 62,5%, он будет увеличен на 40% для первого деления и увеличен еще на 20% для второго деления. Ваши два абзаца также будут иметь этот размер шрифта, так как они не увеличивают и не уменьшают размер.

По сути, если вы хотите, чтобы у «тегов» и «опубликованных» абзацев был текст меньшего размера, присвойте им размер меньше единицы, например, 0.9em. Это даст им размер на 10% меньше, чем у других элементов в том же родительском div.

1 голос
/ 12 мая 2010

Грэм был прав, я поставил;

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

И это изменило размер шрифта. Обновлено Jsfiddle ее е.

EM рассчитывается исходя из базового размера основного шрифта. Смотрите здесь для объяснения того, как это работает:)

...