![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
CSSとHTMLでホームページを作っています。
ですがなぜかIEの表示のみ、妙な表示になります。
<h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します(IEのみ)。
この対策法を教えていただけないでしょうか?
ソース(一部を抜粋、少し書き換え)は
HTMLは4.01 Traditional(DTDあり)で、
<h3 class="st">ABOUT</h3>
<p>
ここは×××の管理する、・・・・サイトです。<br>
●●はメインからどうぞ。
</p>
<h3 class="st">Update Log</h3>
<p>
2009/03/24 ああああああああ<br>
2009/03/23 あああああああああ<br>
ああ<br>
</p>
CSSは
h3.st{color:#727171;background-color:#ffffff;font-size:95%;text-align:center;margin:0px 25px;padding:3px 0px;border-bottom:#87ccd4 1px dotted}
p{text-align:left;margin:0px;padding:3px 32px;line-height:200%;font-size:90%;}
です。
CSS内で、CLASS要素を指定した他のpタグにfloatを指定しましたが、それが影響しているかと思って消してみても変わりません。
どうかよろしくお願いします。
No.1ベストアンサー
- 回答日時:
> <h3>などの見出しタグで見出しを作り、そのあとに段落でいろいろ指定していると、なぜか見出しのマージンが後の段落に影響します(IEのみ)。
サンプルのソースを再現した限りでは、IEでもIE以外でも結果は同じ様にしか表示されず、「見出しのマージンが後の段落に影響」という現象は確認されませんでしたが…?
具体的に、質問者様の仰る不具合とはどの様なものでしょうか?「見出しのマージン」はこの場合、上下は0・左右は25pxづつであり、「段落」のマージンは上下左右共に0、ですよね。pに背景色を一時的に塗るなどしてpのレンダリング領域を確認しましたが、いずれの環境でもちゃんとCSSでの指定通りにマージンは0になっている様ですよ?
勿論、pには元々パディングで上下に3px・左右に32pxづつ設定されていますからボックスの内側の余白はその通りにありますし、line-heightも200%と大変広目なので結果としてテキストがちょうど一行空きぐらいの間隔で改行される事にはなりますが、これはIEに限った事ではない正しい仕様ですし…
IEと他でどの様な違いが起きているのかが確認できる様な実際の不具合が起きているソースを提供して下さい。
この回答への補足
すみません、解決いたしました。
不具合が起こっていたのは二個目の段落のマージンだったのですが、なぜかh3にwidthを指定したらなんとかなりました。
ご回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
CSSの設定
-
CSSでh1とその下の文字との行間...
-
HTMLフォームのSELECTの幅を一...
-
CSSで中央ぞろえにするには?
-
IE8ではtext-align: center;で...
-
CSSでテキストを垂直、中央に設...
-
ホームページの左右にスペース...
-
DIVボックス内でのCSSを使用し...
-
スタイルシートで均等割りつけ...
-
複数のDivタグを中央ぞろえ(Dr...
-
CSSでテーブルセルの大きさ...
-
macとwindowsのレイアウト崩れ...
-
全体のレイアウト:中央揃えに...
-
FFとIEでスクロールバー、背景...
-
テキストボックスの様に文字の...
-
スクロールバーが表示されない。。
-
表(?)を中央に寄せ、一番上...
-
画面サイズ・横1024の場合の表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報