0

请考虑以下CSS代码：

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
} 

.main-headline {
font-family: 'Open Sans', sans-serif;
font-size: 3.1875em;
font-weight: 700;
text-align: center;
margin-bottom: 0em;
margin-top: 5em;
}

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em;

.container_12 .grid_12 {
width:58.75em;
}

和HTML：

<header class="container_12 grid_12 alpha omega">
    <div class="grid_12 alpha omega">
        <hgroup>
                <h1 class="main-headline">Some text</h1>

            <p class="h1-sub grid_12 alpha omega">Some text</p>
        </hgroup>
    </div>
</header>

问题是： .h1-sub类的宽度很奇怪。有一个 body font-size 16px 和 container: 58.75em 应该等于 940px。但相反，我收到 1234px 的宽度。我得出的结论是我的宽度是根据.h1-sub字体大小计算的，即 1.3125em 或 21px。

1em 值不仅可以从正文字体大小继承吗？请注意，字体大小也已被覆盖的 .main-headline 类没有发生任何事情。

提前感谢您的帮助。

4

1 回答 1

0

这行 CSS：

.container_12 .grid_12 { width:58.75em; }

正在尝试选择任何具有.grid_12inside类的东西.container_12。因此，这是试图为 p 标签提供宽度。如果这不是您想要做的，您只需声明：

.container_12 { width:58.75em; }

你也忘了在最后.h1_sub用 a 关闭样式}：

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em; }

这是一个工作小提琴：http: //jsfiddle.net/B893S/

于 2013-08-30T09:11:42.780 回答