1

私の問題を解決するためのアドバイスを探しています。

ブログ用に新しい wp テーマをコーディングしています。

私が遭遇した問題はこれです。ホームページとカテゴリページに投稿するためのリンク (投稿につながるリンク) があります。ホームページでは、このリンクには流動性の原因となる h3 タグがあります (ウェブサイトの h1 タイトル、カテゴリの h2 タイトル、h3 投稿タイトル)。カテゴリページでは、フローが異なります（h1カテゴリ名、h2投稿タイトル）。問題は、デザインに関しては、それらが同一に見える必要があるということです...したがって、私の課題は、カテゴリページの h2 をホームページの h3 と同じに見せることです。

それほど簡単ではないことがわかりました。まず、小さいフォントを使用する必要がありました。h2 0.8em と h3 1em を設定する必要がありました。これは、この問題に対処する正しい方法ですか? そして、両方の見出しの余白が 0 だったにもかかわらず、いくつかの奇妙な間隔が発生しました...

したがって、これが最終結果であり、h2 が h3 のように見えます (小さいフォントを使用し、h2 の行の高さを使用し、margin-bottom を 3px 以上にする必要がありました)。

私の質問は、これがこの結果を達成する良い方法であるかどうかです。または、私の一般的なリセットファイルに何か問題がありますか??

物事をより明確に表示するための画像を含める：

http://imageshack.us/photo/my-images/33/unled1hg.jpg/

また、次の 2 つのページをライブで見ることができます: http://artvard.com/category.html http://artvard.com/main.html

4

3 に答える 3

2

あなたが抱えている問題は、em が親要素から継承されているためです。役立つ場合は、パーセンテージのように考えてください。

したがって、 を 1em に設定するh2と、コンテンツ領域が0.8em でスタイル設定され、 div<div id="content">内のすべてが 0.8emで表示されます。内に要素がある#content場合、以前に 0.8em と定義した 1em のサイズになります。つまり、より小さく表示されます。h2#content

最近のほとんどのブラウザでは、ユーザーがページのサイズを大きくすることができるため、px よりも ems を使用することに対する議論は弱くなります。したがって、px に切り替えるか、継承を注意深く確認することをお勧めします。

于 2011-07-06T17:49:57.397 に答える
1

でフォントサイズを指定するemと、親要素のフォントサイズに基づくため、タグの親が異なる場合、同じ設定で実際のサイズが異なる可能性があります。

h3に特別に設定されたスタイルがある場合は、h2に対してそれを繰り返すか、継承された値に従って調整することができます。

h3のスタイルがブラウザのデフォルトに基づいている場合、h2を同じように見せることはできません。あるブラウザではh3のデフォルトと同じように見えるh2のスタイルを作成できますが、別のブラウザではh3のデフォルトは異なって見えます。

于 2011-07-06T17:49:15.493 に答える
1

最善の解決策は、H2 と H3 の両方で CSS リセットを使用し、そこからスタイリングを開始することです。それ以外の場合は、行の高さのフォントサイズなど、ブラウザーごとに異なるプロパティが常に存在します。

2011年にこの回答を書いたとき、私は完全なリセットを提案しましたが、現在、スタイリングを適切なデフォルトにリセットするこの優れた一般的に使用されるNormalize.cssがあるため、開始するのに適したベースがあります.

于 2011-07-06T17:41:54.547 に答える