こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IE7で印刷するとmargin-bottomが効かなくなります

こんにちは。お世話になります。
見出し1~6にマージンを設定しているのですが、IE7で印刷するとmargin-bottomが効かなくなり、見出しと文字の間が詰まってしまいます。
-----------------------------------------
<style type="text/css">
<!--
h1 {
font-size:170%;
color:#333;
letter-spacing: 0.1em;
line-height:120%;
padding:3px 0 0 10px;
margin:0 0 12px 0;
} -->
</style>

<h1>見出し1</h1>
<p>文字文字文字文字文字</p>
-----------------------------------------
念のため、<h1 style="margin-bottom:12px;">と直接スタイルシートを書き込んでみたり、スタイルシートをmargin-bottom:12px;としてみましたが、やはり駄目でした。
なおtop・left・rightは効いています。
何か良い方法がありましたら教えて下さい。
お願いします。

投稿日時 - 2009-05-07 10:27:02

QNo.4938215

困ってます

質問者が選んだベストアンサー

回答1の者です。補足ありがとうございました。
ご存知かもしれませんが、IE6や7はmarginに関するバグがあります。
他のブラウザでは問題ないということであればIE側のバグなども考えられますが、
ちょっと断言まではできません。ただ、軽く調べてみましたが、みなさんIEの
margin-bottomにはバグで悩まされているようです。

とりあえず、質問者さんのソースを再現して以下のソースでhtmlファイルを作成し、
印刷を試してみましたが、当方の環境では<h1>と<p>の間が詰まるといったことは
おきませんでした。実際の印刷と併せて印刷プレビュー画面でも詰まりますでしょうか?
-----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
h1 {
font-size:170%;
color:#333;
letter-spacing: 0.1em;
line-height:120%;
padding:3px 0 0 10px;
margin:0 0 12px 0;
} -->
</style>
<title>タイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>文字文字文字文字文字</p>
</body>
</html>
-----------------------------------------
当方の環境では以下のブラウザで問題ないことを確認しました。
Internet Explorer 6 7 8 Firefox 2 3 Opera 9 Safari 3

上記のみのシンプルなhtmlファイルを作成して再現するか確認してみてください。
現状としては他のCSSが入っていないかチェックした上で、padding-bottomでの
運用回避ができないか、IE用のCSSを別途用意できないかなど検討してみて下さい。

投稿日時 - 2009-05-07 20:32:29

お礼

検証及びお礼が遅くなり、大変失礼しました。
作成いただいたHTMLを確認いたしましたところ、こちらは行間が詰まることはありませんでした…。
やはり、その他のCSSが関係しているのでしょうか。CSSをコメントアウトしながら、試してみたいと思います。
ご回答、本当にありがとうございました!

投稿日時 - 2009-05-13 14:15:25

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

他のCSSが影響してるのかもしれませんね。
padding-bottomにしてしまうのが手っ取り早そうですが、
背景色と同じ色の線にするという手もありますよ
border-bottom:solid 12px #fff;

投稿日時 - 2009-05-07 19:56:25

お礼

お礼が遅くなり、失礼しました。
border-bottomは思いつきませんでした! 参考にさせていただきます。
ご回答ありがとうございました!

投稿日時 - 2009-05-13 14:13:15

ANo.1

ちょっと情報が少ないので判断が難しいのですが、他のブラウザ(Firefoxなど)で印刷しても同様の症状がでますでしょうか?

IE7は標準準拠モードでレンダリングされていますか?後方互換モードですか?
floatは使用されていませんか?使用しているのであれば一度floatを解除して確認してみてください。
もう少し詳細が分かると回答できると思います。

投稿日時 - 2009-05-07 11:05:13

補足

ご回答ありがとうございます。
情報不足がありまして、失礼いたしました。

他のブラウザを確認したところ、Firefox・Opera・Safariでは問題なく印刷できます(共にWinです)。

DOCTYPE宣言は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
です。

floatは使用しておりません。

以上です。
解決策がありましたら、ご教示ください。
よろしくお願いします。

投稿日時 - 2009-05-07 13:03:46

あなたにオススメの質問