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継承しています。テキストのサイズを拡大または縮小しません。なんで？.12px1em1em 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-sizewithを定義して末尾にpx追加!importantすることで、すべてが修正されました。

于 2013-07-03T14:42:53.030 に答える
1

問題は次のとおりです。

ここに画像の説明を入力

私の無償のフリーハンドサークルで示されている<h3>ように、 は の子として読み取られておらず、<p>にあるはずのテキストはそうでは<p></p>ありません。本体に直接配置されているため、CSS スタイル<p>は適用されていません。 .

マークアップを変更する必要があります。

本当に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 に答える