- ベストアンサー
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は効いています。 何か良い方法がありましたら教えて下さい。 お願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
回答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を別途用意できないかなど検討してみて下さい。
その他の回答 (2)
- tenderfeel
- ベストアンサー率56% (215/379)
他のCSSが影響してるのかもしれませんね。 padding-bottomにしてしまうのが手っ取り早そうですが、 背景色と同じ色の線にするという手もありますよ border-bottom:solid 12px #fff;
お礼
お礼が遅くなり、失礼しました。 border-bottomは思いつきませんでした！ 参考にさせていただきます。 ご回答ありがとうございました！
- its_a_sony
- ベストアンサー率62% (20/32)
ちょっと情報が少ないので判断が難しいのですが、他のブラウザ（Firefoxなど）で印刷しても同様の症状がでますでしょうか？ IE7は標準準拠モードでレンダリングされていますか？後方互換モードですか？ floatは使用されていませんか？使用しているのであれば一度floatを解除して確認してみてください。 もう少し詳細が分かると回答できると思います。
補足
ご回答ありがとうございます。 情報不足がありまして、失礼いたしました。 他のブラウザを確認したところ、Firefox・Opera・Safariでは問題なく印刷できます（共にWinです）。 DOCTYPE宣言は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> です。 floatは使用しておりません。 以上です。 解決策がありましたら、ご教示ください。 よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
検証及びお礼が遅くなり、大変失礼しました。 作成いただいたHTMLを確認いたしましたところ、こちらは行間が詰まることはありませんでした…。 やはり、その他のCSSが関係しているのでしょうか。CSSをコメントアウトしながら、試してみたいと思います。 ご回答、本当にありがとうございました！