- 締切済み
IE borderの下まで背景 paddingの下まで背景
以下のhtmlを参照してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>背景</title> <style> div {background-color:#CCCCFF;border:dashed 1px #FFCCCC;} </style> </head> <body style="margin:0px;"> ＠IE7での話です。 背景がborderの下まで表示されるかどうか。 <br> <div>指定無しMＭ同字口()□</div><br> <div style="width:100%;">width:100%;MＭ同字口()□</div><br> <div style="width:500px;">width:500px;MＭ同字口()□</div><br> <div style="height:18px;">height:18px;MＭ同字口()□</div><br> <div style="line-height:18px;">line-height:18px;</div><br> <div style="height:20px;">height:20px;MＭ同字口()□</div><br> <div style="line-height:20px;">line-height:20px;</div><br> 高さや幅を指定するとpaddingの下<br> 指定無しならborderの下<br> 指定有りでborderの下まで表示させるにはどうすればいいのでしょうか。line-heightだと1行にしか対応できませんし、幅も指定できません。 </body> </html>
- idhokanohi
- お礼率58% (48/82)
- HTML
- 回答数10
- ありがとう数9
- みんなの回答 （10）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫DIVを重ねるのは私も質問する前に思いつきましたし、既出なんです・・・ 入ってくれなきゃ分かりません。 ≫CSSの記述の部分でstyle="height:auto;"が入っているのは記述ミス、ですよね？ これは、ＩＥが本来height:autoであるべきところで、上書きしてしまうバグ対策でいつも入れています。 IEのみ、ブロック幅を変更するようなmarginやwidthがあると、その領域を誤って算出してしまうので、divを２重にするしか対処法はないと思います。 次のバージョンのIEが行き渡るまでは致し方ないのではないかと・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEのバグ対策で、ハックを使用しない方法・・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK REV="MADE" HREF="mailto:hoge@hoge.com"> <LINK REL="NEXT" HREF="hoge.html"> <title>背景をどこまで塗るか?</title> <style type="text/css"> <!-- body{ margin: 0px;line-height: 1.2em;} div{ width:100%; margin-bottom: 20px; background-color:red; padding:0px; } div>div { margin:0px; border:dashed 4px blue; style="height:auto;" } /--> </style> </head> <body> <div><div>□破線の下は赤</div></div> <div style="width:100%"><div>□破線の下は白</div></div> <p>BOXの高さheightを指定しなければはIEの方が2px高くなる（IE20px）</p> </body> </html>
お礼
ORUKA1951さんはすごく丁寧でいい人だと思うのですが、DIVを重ねるのは私も質問する前に思いつきましたし、既出なんです・・・ ところで、前回のソースもなのですが、CSSの記述の部分でstyle="height:auto;"が入っているのは記述ミス、ですよね？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私の結果、firfox3.05,opera9.26,sfari9.26,IE7.05は下記のとおり、 スタイルシートが読み込まれていない？？ W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/validator.html#validate-by-input )にスタイルシート部分だけ貼り付けてチェックしてみてください。(この掲示板のシステム上の問題で(や"の文字コードが変わっている可能性があります。)
お礼
え、っと？ 画像を見ても、二段目のDIV、 IEのborder（破線）の背景が白ですよね、それをどうにかしようという話なのですが、私の質問の仕方が悪かったですね？ 幅指定(widthやheight)するとこれが起きるのをどうにかしたいという質問です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
style="width:100%" を入れ忘れてましたが、同じ表示になるでしょう。 IEが、divにwidthmargin,top等が指定されていると、height:autoと解釈しなければならない・・・という部分にバグがあるためでしょう。 Windows上のIE5.5以前、IE6.0の互換モードは持っていませんので確認してません。
お礼
できませんでした。 おかしいですね、私の環境だけで起こるのでしょうか？ 以下のソースで合っていますよね <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>背景をどこまで塗るか?</title> <style type="text/css"> <!-- body{margin: 0px;line-height: 1.2em;} div {background-color:red;border:dashed 4px blue;margin-bottom: 20px;height:auto;} /--> </style> </head> <body> <div>□破線の下は赤</div> <div style="width:100%;">□破線の下は白</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEと他のブラウザの背景をどこまで塗るかを統一したいということでよいでしょうか? IEのCSSkの解釈がおかしい・・・widthやmarginが設定してあると、ボーダーの内側までしか塗らない。高さの余白を0pxと解釈することが原因ですから、強制的に height:auto; を非置換ブロック要素の場合は指定すると良いかと 他のブラウザは、規定どおりautoになる。 下記ソースは、タブを全角スペースに置き換えてあります。またこの掲示板の仕様で文字コードが変わる可能性があるので、うまく表示できないときは手で修正してください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK REV="MADE" HREF="mailto:hoge@hoge.com"> <LINK REL="NEXT" HREF="hoge.html"> <title>背景をどこまで塗るか?</title> <style type="text/css"> <!-- body{ margin: 0px;line-height: 1.2em;} div { background-color:red; border:dashed 4px blue; margin-bottom: 20px; style="height:auto;" } /--> </style> </head> <body> <div>□破線の下は赤</div> <div>□破線の下は白</div> <p>BOXの高さheightを指定しなければはIEの方が2px高くなる（IE20px）</p> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫<body>要素に直接<br>は入れられません。 ≫しりませんでした。後で他の場所でも聞いてみます。 あのですね。まず確認すべきは仕様書です。ネットや書籍の情報なんて当てになりません。分からないときは仕様書をまず確認するのが正しい方法です。 仕様書には、はっきりと 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 7.5.1 BODY要素 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY )］より と書かれています。これは、繰り返しますが、 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> body要素に、入るのは (%block;|SCRIPT)+ +(INS|DEL) と明記してあるのです。 ≫え？幅指定できないのですか？て、え、divに幅指定ってできないのですか？ご冗談を・・ あなたご自身が質問文の、２３行目に書かれているモノそのままですが、自分で書かれておいてご冗談とは・・・ ≫ソースを実際にHTMLファイルにしてIEとFFで見比べていただけたんでしょうか？ まともなソースではないので。。。書き直す必要があったので<br>を除いてテストしました。 追加されて書かれたソースもめちゃくちゃ ≫<p><div>指定無しMＭ同字口()□</div></p> って、なんですか? 同じく仕様書には、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 9.3.1 段落: P要素 <!ELEMENT P - O (%inline;)* -- paragraph --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで ［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P )］より ★p(paragraph)要素には、インライン要素以外。一切入れられないと・・・ <p><div></div></p>なんてあってはならないです。 注)もしこれがあったら、ブラウザは、<p>内に<divブロック要素>が来るはずはないので、ここに</p> が抜けていると解釈してそれを追加します。そのため空行が出来てしまう。 スタイルシートを適用する前に、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで ［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.html )］より ということです。 スタイルシートで悩む前に、まずそれが正当なHTMLであるか否かをまず確認してください。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 【参考サイト】以下で必ずチェックしてから、スタイルシートに取り組みましよう。 The W3C Markup Validation Service http://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でないと、無駄な労力をしてしまいます。 ★まず、正当なHTMLを用意してください。 でないと、アドバイスを差し上げようにも出来ないのです。
お礼
とりあえず100点もらえるようにしました。 別に入れなくてもいいものもいれましたが。 それから私はstrictとか無理ですから、looseで書いています。 仕事じゃなくて趣味なので完璧を求められても戸惑っちゃいます・・・。 divにwidthを指定しても何も問題がないようなのですが？（幅指定できないとは信じられないです・・・ それからinline要素をdisplay:blockにしたとき（その逆も）はどういう判定になるのかな、と。やっぱりblockなのでダメっぽいかな。 あと、いちいちmarginするのも面倒じゃないですか、美しくないし。 <br>もそんなに問題があるようには書かれていませんし、何か良い方法は他にありませんか？ アドバイスいただけるそうなので楽しみです＾＾。 最終的にIEはなくなってしまえばいいとか言わないで下さいね。 その困った子をなんとか他のと合わせるためにがんばっているので、そんな回答は必要ないです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK REV="MADE" HREF="mailto:hoge@hoge.com"> <LINK REL="NEXT" HREF="hoge.html"> <title>背景</title> <style type="text/css"> <!-- div {background-color:red;border:dashed 1px blue;} body {margin:0px;padding:0px;width:100%;} /--> </style> </head> <body> <div style="margin-bottom:16px;">□破線の下は赤</div> <div style="width:100%;">□破線の下は白</div> <p>BOXの高さheightを指定しなければはIEの方が2px高くなる（IE20px）</p> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問内容が意味不明なので回答は難しいです。 ・高さや幅を指定するとpaddingの下 背景は、ブロック要素の内側ですから、paddingは関係ありません。 ・指定無しならborderの下 背景はborderの内側です。 ・指定有りでborderの下まで表示させるにはどうすればいいのでしょうか。 背景はborderの内側です。 ・line-heightだと1行にしか対応できませんし line-heightはinlineに対する指定です。 ・幅も指定できません。 HTMLソース自体の問題が多々ある。 <body>要素に直接<br>は入れられません。<br>は強制的な改行です。 仕様書には <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> と書いてありますよ。block要素とscriptとinsとdelしか入らないと。
お礼
FF、IEで行間や文字位置を完璧に近いところまで合わせるCSSを作っている最中です。 <body>要素に直接<br>は入れられません。 しりませんでした。後で他の場所でも聞いてみます。 line-heightはボックスの中の字の位置を変更するために使ったのですが、<span>タグとかで囲って指定しろってことですかね？ FFだと全て紫の上にピンクの破線が乗りますが、IEですと幅指定をすると紫の外側にピンクの破線ができます。これをどうにかしたいのです。 って、え？幅指定できないのですか？て、え、divに幅指定ってできないのですか？ご冗談を・・ さて、質問の意図ですが、伝わらなかったなんて。ソースを実際にHTMLファイルにしてIEとFFで見比べていただけたんでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>背景</title> <style> div {background-color:#CCCCFF;border:dashed 1px #FFCCCC;} </style> </head> <body style="margin:0px;"> <p>＠IE7での話です。</p> <p>背景がborderの下まで表示されるかどうか。</p> <p><div>指定無しMＭ同字口()□</div></p> <p><div style="width:100%;">width:100%;MＭ同字口()□</div></p> <!--<p><div style="width:500px;">width:500px;MＭ同字口()□</div></p> <p><div style="height:18px;">height:18px;MＭ同字口()□</div></p> <p><div style="line-height:18px;">line-height:18px;</div></p> <p><div style="height:20px;">height:20px;MＭ同字口()□</div></p> <p><div style="line-height:20px;">line-height:20px;</div></p>--> <p>高さや幅を指定するとpaddingの下</p> <p>指定無しならborderの下</p> <p>指定有りでborderの下まで表示させるにはどうすればいいのでしょうか。</p> </body> </html> 一応Pタグに替えておきました。上二つのDIVのborderをFFとIEで見比べてください。 よくよく考えてみればこのサイトはUTF-8に変換されるのでコピペしたときは見直してね。
borderを背景画像にしては駄目なのですか？
お礼
はい、だめですよー。
- hitsumari
- ベストアンサー率63% (7/11)
質問の意図に沿うかは分りませんが、 DIVタグを重ねる、もしくはTableタグを使うなどしてはいかがでしょうか？ 以下にhtmlを記載しておきます。 <html><head><title>背景</title> <style> div {background-color:#CCCCFF;} </style> </head> <body> <div style="width:500px;"><div style="line-height:18px;border:dashed 1px #FFCCCC;">DIVタグを重ねる</div></div> <br> <Table cellspacing="0" cellpadding="0" style="width:500px;background-color:#CCCCFF;"><TR> <TD style="border:dashed 1px #FFCCCC;line-height:18px;">テーブルタグを使う</TD></TR></table> </body></html>
お礼
ありがとうございます。 この方法なら私も思いついたのですが、いかんせんスマートではないと思ったのですよ。
お礼
style="height:auto;"を記述するのは初めて見るタイプでした。 こんなハックもあったんですね。 IE無くなってしまえばいいのに・・・と思ってしまいます。 稀にIEの方がいい所もありますけどね； 丁寧に長い時間付き合っていただき、本当にありがとうございました。