IE6,IE7でボックスがずれてる。解決法を願いし

質問

こんにちは、Santaと申します。
いつもお世話になっております。

さて、ホームページを製作しております。
ブラウザプレビューには、
Chrome 16.0
Firefox 8.0.1
IE9
ソフト Microsoft Expression SuperPreview 4 Trial を使用しまして
IE6
IE7
IE8
IE9
Firefox3.6
を確認しておりますが、IE6とIE7のみ、ボックスがずれてしまいます。
どのようにしましたたら、解決できますでしょうか？

html（複雑に作ってしまいましたので、簡単に書かせて下さい）
*******************************************
<div id="wrapper">
<div id="header>
Rと書いてある画像が入っているボックスです
</div>
<div id="line">
直ぐ下の、１０pxの横長の950pxの黒いラインです。
</div>
<div id="contents">
こちらに５つのDIVボックスが入っております。
●左の赤いwidth:75px height:500px;のものが一つ目のDIVボックスです。
</div>
</div>

簡単に書きました。
画像のとおり、<div id="line"></div>に入っている
width:950;
height:10px;
の黒のラインが少し下がってしまい、赤色の部分と重なってしまっております。
赤色の部分が上がっているのではなく、上の横長の黒のラインが下がっているようです。

何か解決法が御座いますでしょうか？
どうぞ、よろしくお願い致します。
失礼致します。

回答No.3

noname#158634 · ベストアンサー

画像が入っているんですか。では私の#1の回答は意味を成しません。失礼しました。
というか
＞赤色の部分が上がっているのではなく、上の横長の黒のラインが下がっているようです。
見落としてました。実に申し訳ない。
とはいえ、#2さんの言うようにIE6は本当にひどいのでHTMLの解釈の違いで変な現象がすぐ起きますが7は割とましなので、ソースのほうの不備は疑うべきですね。まずは#headerと#lineのCSSを再確認してみてください。どうやら#line「だけ」がずれているようですから特に#lineが優先で。

お礼

tk-is-pg_1206 さん

2度もありがとうございます。
きっと、自分のソースが複雑になってしまい、ごちゃごちゃしてしまって、imgをDIVで囲んだりしました。最初から文書構造をきちんとすれば、後々このように考えずに良かったところ。

はい、わかりました。#line優先で、#headerも含めて検証致します。それぞれのボックスにバグでもないのに、
display:inline;
overflow:hidden;
_zoom:1;
等色々入れて見ましたが、やっぱり崩れてしまいますので、IE7のせいではなく文書構造がおかしくなっている可能も見ていきます。

これからOKURA様の回答を参考にやってみます。
ほんとうに、有難うございました。
解決できましたら、ご報告差し上げます。
失礼致します。

回答No.4

k0021

>Rと書いてある画像が入っているボックスです
ボックスで作成の必要せい有りますか

私もボックスで作成内容に背景色指定でボックスがずれてしまいます。

<div id="header>の検討が必要と思います

IE7までとIE8以降では、上記問題は私の場合発生しています。

対策としてIE7までとIE8以降でスタイルシートを変更していますが

参照URL内容も詳細に見ればずれてしまいます。

参考URL：

http://ryuso.info/me/se1/tp_p1.htm#t_tb

お礼

k0021 様

さんたです。
大変遅くなり、申し訳有りません。上記のURL見させて頂きまして、良く理解できました。IE7では、他のブラウザとどこかしら異なる所が出てきます。
まだまだ技量不足です。

k0021 様のホームページはとても詳しいので、しっかり読ませて頂きます
この度は、誠にありがとうございました。
とてもよい勉強になりました。
失礼致します。

回答No.2

ORUKA1951

IE6は、ボックスのサイズをボーダー辺までにしてしまうバグがありますからともかく、IE7も同様なずれが生じるのは、書き方がおかしいのでしょう。
　黒のラインが画像でないのでしたら、
div.header{border-bottom:black 10px solid;}を追加するだけでよいはずです。
　なお、ボーダーに画像を設定することはCSS3からは可能ですが、当然CSS3以前の作られた古いブラウザは対応していません。

　No.1のtk-is-pg_1206さんも言われているように、HTMLは文書構造をマークアップするもので、プレゼンテーションを指定するスタイルシートにひこずられたらダメです。
(参照)画像の丸印起点にposition:を相対配置したい - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7180232.html#a8 )
　↑このHTMLのまま、div.header{border-bottom:black 10px solid;}とするなり
　div.header{background:url() repeat-x left bottom;padding-bottom:10px;}

　あるいは、div.headerとdiv.sectionの間に<hr>を追加して
hr{margin:0;height:10px;border:none;background:url(images/background/black.gif)}

とか・・

お礼

ORUKA1951 様

ありがとうございます。いつもすみません。
＞IE7も同様なずれが生じるのは、書き方がおかしいのでしょう。
その通りだと思います。IE6だけならまだしも、IE7も同じように下がってずれてしまいます。IE8,IE9では大丈夫でした。

説明不足でした。
黒のラインは画像でございます。最初は<p><img></p>でしていたのですがそれでも上手くいかないので、DIVを使いました。

はい私が投稿してご回答を頂きましたものに記して下さっているソースを入れてみます。

自分のソースが複雑になりましたので、結果報告が遅くなるかもしれませんが、回避も含めて色々とやってみます。
水平線を使用している
＞hr{margin:0;height:10px;border:none;background:url(images/background/black.gif)}
がいけるかもしれません。

お時間を下さいませ
ありがとうございました。
失礼致します。

補足

さんたです。

大変遅くなり、申し訳有りません。
この度はサポート、誠にありがとうございました。教えて頂いた事を分解しながらやってみました。

ソースを見直した所一ーカ所DIVタグの＞カッコ抜けがありました。初歩的なミスでスミマセン。その結果横黒バーの下がりが10 PXから5 pxに、変わりました。未だ、5px下がっておりますので、IE7のバグだと思います。

先に示して頂いたソースを為してみましたならば結果はO Kでした。
しかしながら、自分のものに、直ぐに適用することは難しいでした。

と言う事は、私ソース自体におかしな場所があると言う事ですが未だにバグの対処法を見い出す事が出来ずにおります。様々な、IE7ハックを為してみたいと思います。
現在のところは、ハックをしても、正常にはなってくれません。

ご丁寧に、ありがとうございました。
失礼致します。

回答No.1

noname#158634

＞<div id="line">
＞直ぐ下の、１０pxの横長の950pxの黒いラインです。
＞</div>
確認しないで言うけど、中に要素がないボックスだからブラウザによって解釈が異なっててずれるんじゃないかな。確かIE7まではかなりいろいろ酷いので。

私やあの人が何度も言ってますが、HTMLはそこにあるものの意味を示してブラウザに解釈させるための道具です。
「縦10px、横950px、背景色黒」はあくまでスタイルシートによって指定された見た目であって、そのために用意された中に何も要素がない<div>なんてのは、HTML的に存在してはいけない。
間違った使い方をして挙動がおかしいとしてもそれは当然のことだし、間違った使い方ができる方法なんてのも教えるわけにはいかない。
区切り線として表示させるのならおとなしく「縦10px横950pxの黒画像」を用意するか…まあ本当にべた塗り一色なら、1px×1pxの画像を縦横拡大して<img>で置いても構わない。
つまり最悪でも
<div><img></div>
とする。
これで少なくとも「HTMLの意義として」はきちんと意味を成すし、中に要素を持つブロックであれば、CSSで変な指定をしない限りは添付画像のような食い込みは発生しない。

お礼

tk-is-pg_1206 様

いつもお世話になっております。ありがとうございます。
文章構造がなっていないのですね。すみません。
＞縦10px横950pxの黒画像

はい、画像を中に入れております。縦10px横950pxの黒画像
<div><img src="~~" width="510" height="10"></div>
のようにしております。
見にくいと思いますが、かすかにグラデーションが入っており、模様がついております。
他の場所の文章構造をきちんとしていないのでおかしなことになっているかもしれません。

すみません。
ありがとうございました。