0

I have some very simple code which is:

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

Despite my font-size being set to different numbers in the CSS, the <p> always ends up using the <h3> font-size. I know you're probably saying, just put the <h3> tag on the outside! But I can't. Not allowed in this case. What's going on?

4

5 回答 5

4

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

于 2013-07-02T21:30:40.580 回答
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>

因此，无论包含元素是什么以及 font-size 是什么，都将决定 text 字符串的 font-size This is the paragraph。

所以简单的答案是：增加em您的h3. 在某些时候，您仍然可能会得到意想不到的结果，因为其他 CSS 可能会由于不正确的标记和浏览器的操作而影响基本字体大小。

于 2013-07-02T21:56:58.210 回答
1

通过定义font-sizewithpx并添加!important到结尾，一切都得到了解决。

于 2013-07-03T14:42:53.030 回答
1

这是问题所在：

在此处输入图像描述

正如我的无偿徒手画圈所证明的那样，<h3>不是将其作为子项阅读，<p>并且应该在其中的文本<p></p>不是，它被直接放置在正文中，因此<p>没有将 css 样式应用于它.

你必须改变你的标记。

如果你真的不能改变你的 html 你可以这样做：

技术工作示例

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

虽然我真的不推荐...

于 2013-07-02T22:06:03.243 回答
0

看看这个小提琴： http: //jsfiddle.net/peW3p/我让它从正文输出生成的 HTML。你可以看到正在发生的事情。里面的所有东西<p>都被拉出来了。这就是你的问题所在。正如@KruegerDesigns here所建议的那样，如果您希望能够确定您的 CSS 将要做什么，请使用<h3>.

于 2013-07-02T21:56:48.983 回答