父级字体大小受子级字体大小的影响

Question

我有一些非常简单的代码：

<p>
  <h3>Title is here</h3>
  This is the paragraph
</p>

CSS：

h2 {font-size:2.3em;}
h3 {font-size:1em;}
p {font-size:0.5em;}

尽管我在CSS中将字体大小设置为不同的数字，但<p>始终使用<h3>字体大小。我知道你可能会说，只需将<h3>标签放在外面！但我不能。在这种情况下不允许。发生了什么事？

Answer 1

将h3放在段落标记内不是格式化标记的正确方法。我建议将其移出段落。

Answer 2

即使您不应该使用该标记（因为这里的每个人都会同意）。我会给你一个解决方案。

假设您的基本字体大小为12px。由于浏览器会尝试通过从h3移除p来更正此不正确的标记，因此p { font-size: 0.5em; }不会被应用，因为它不再位于p内。文字大小最终不会像您期望的那样6px。 h3现在在我的示例中继承了12px基本字体大小。 1em不会增加或减少文本的大小。为什么？ 1em x 12px = 12px。

这是浏览器正在做的事情：

<p></p>
<h3>Title is here</h3>
This is the paragraph
<p></p>

因此无论包含的元素是什么以及字体大小是什么，都会指示文本字符串This is the paragraph的字体大小。

所以简单的答案是：增加em的{​​{1}}值。在某些时候，由于标记不正确和浏览器的操作，其他CSS可能会影响基本字体大小，因此您可能最终会出现意外结果。

Answer 3

问题在于：

正如我的免费写意圈所示，<h3>并未被视为<p>的孩子而应该在<p></p>中的文字不是，它是直接放在体内，因此<p>的css样式没有应用于它。

你必须改变你的标记。

如果你真的无法改变你的HTML，你可以这样做：

Technically Working Example

h2 {font-size:4.6em;}
h3 {font-size:2em;}
body{font-size:0.5em;}

我真的不推荐它......

Answer 4

通过font-size定义px并将!important添加到最后，所有内容都已修复。

Answer 5

看看这个小提琴：http://jsfiddle.net/peW3p/我从主体输出生成的HTML。你可以看到发生了什么。 <p>中的所有内容都会被删除。这就是你的问题所在。正如@KruegerDesigns here所建议的那样，如果您希望能够确切地知道您的CSS将要做什么，请使用<h3>之外的其他内容。