- ベストアンサー
問題：background-colorの塗りつぶし
- IE9、Firefox11、Chrome18で、footer部分の「background-color」と「border」の調整がうまくいかない問題が発生しています。
- IE9では、borderとbackground-colorの間に隙間(濃い青色)が残ってしまいます。
- Firefox11とChrome18では、CSSのwidthを954、padding: 3px; を実行することで添付ファイル(1)の結果になり、正しく表示されます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
古いIEは、borderやpaddingを含めてwidthとして処理します。 新しいブラウザのデフォルトでは、borer,padding,widthそれぞれが独立して計算されます。 つまり、 { border:3px; padding:3px; width:100px } だった時、 古いIEでは、width:100pxなのに対し、新しいブラウザではwidth:112pxとして処理されます。 ここまでが基本ですが、IEには互換モードというものがあり、最新のIE9でも、古いIEと同じように処理するモードがあります。おそらく互換モードでHTMLを記述されているのでしょう。詳しくは「IE互換モード」で検索してみてください。 解決策としては、新しいブラウザでも古いIEと同じように処理させるか、古いブラウザに向けて別途異なる措置をとるか、のどちらかだと思います。 ちなみに、CSS3のbox-sizingを解釈できるブラウザであれば、以下のように古いIEと同じような計算方法で処理できます。 div{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLのDOCTYPEをきちんと書き、ブラウザが標準モードで動作するようにすれば良いはずです。 古いIEは、巾の解釈が独特でボーダー辺までをサイズとしてしまうからです。 ブラウザが標準モードで動作させる方法は、DOCTYPEスイッチ－HTMLの基本 ( http://www.htmq.com/htmlkihon/302.shtml ) などを参考にしてください。 いまどき、transitinalを使うことは勧めません。(HTML4.01の勧告--1999年以降非推奨なので)---strictだと、ほとんど変更することなくHTML5に移行できますしね。 paddinの内側までがコンテナブロックの巾だとすると、縦に並べるブロックのパディングが異なると、ボーダーの外側までのサイズが変わってしまいますから、それを考慮してデザインしなければなりません。すなわち内部に段落<p>を含め、ブロック要素を内包するブロックにはpaddingを設定せず、内部のブロックのmarginで調整すると決めて置けば楽です。 サンプル--HTML4.01strictです。header,section,footerは、そのままHTML5の要素になります。 タブは＿に置換してあるので戻すこと。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!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"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{margin:0;line-height:1.4em;text-indent:1em;} div.header,div.section,div.footer{width: 954px;margin:0 auto;} div.header{background-color: yellow;} div.section{background-color: aqua;position:relative;} div.section h2,div.section div.section{margin-left:210px;width:auto;} div.section div.section p{margin:0 1em;} div.section div.section{position:static;background-color:silver;} div.footer{background-color: #BFCFFF;} h1,h2,h3{margin:0 3px;line-height:1.6em;} div.section div.tableContent{position:absolute;top:0;width:200px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>記事見出し</h2> ＿＿<div class="section" id="SECTION1"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>CSSでは、コンテナブロックのサイズは、マージン、ボーダー巾、パディングを引いたものがサイズです。古いIEでは、ボーダー辺の内側までをサイズとするためパディングを設定するとサイズが変わってしまいます。</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="SECTION2"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"> ＿＿＿<h3>目次</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="#SECTION1">一章</a></li> ＿＿＿＿<li><a href="#SECTION2">ニ章</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
>transitinalを使うことは勧めません。(HTML4.01の勧告--1999年以降非推奨なので)---strictだと、ほとんど変更することなくHTML5に移行できますしね。 おっしゃられる通り、transitinalで記述しておりました。 strictに修正したところ問題が解決しました。 情報ありがとうございました。
お礼
情報ありがとうございます。 >IEには互換モードというものがあり、最新のIE9でも、古いIEと同じように処理するモードがあります。おそらく互換モードでHTMLを記述されているのでしょう。 transitionalで記述してあり、strictに変更したところ問題が解決しました。 情報提供ありがとうございました。