ブラウザによってスペースができる

質問

HTML 4.01とCSSを使って、W3Cのガイドラインに準拠したサイトを作っています。
そのサイトを、Internet Explorer（以下、IE）とFirefoxで動作確認しています。

ソースを見やすくするために、タブでインデントを施しています。

【サンプル】
<div id="header">
　　<h1>サンプルページ</h1>
　　<p>これはサンプルページです。</p>
</div>

このようなソースをIEで確認すると問題ないのですが、
Firefoxで確認するとタブがスペースとなって表示されてしまいます。
なので、IEにあわせてmarginなどを設定すると、
Firefoxで見た際に大幅にデザインが崩れてしまいます。
（marginの値+タブのスペースが表示されるため。）

そこで、インデントを削除して確認してみてもまだ若干スペースがあります。
どうやら、改行がスペースとして表示されているみたいです。

Geckoのレンダリングエンジンの場合になるように思うのですが、
これを回避する策はないのでしょうか？
できれば、インデントはそのままにしておきたいと思っています。
（ソースが見にくくなるため。）

回避する策を知っている方がいましたら、どうかよろしくお願いします。

回答No.5

quads · ベストアンサー

今まで一般人ってチェックしてましたが、全部経験上の知識です。

って、URIとか全部消去されましたね…（苦笑
まぁ、うｐされたものを確認したので大丈夫です；

今回の場合はFF(IE以外のモダンブラウザの一部)でimg要素というインライン要素がどのような高さ（縦位置）で扱われているのかを知る必要があります。

画像をリンクとして使い、anchorにbackground-colorを指定すると分かるのですが、画像の縦の位置＝img要素のvertical-alignのプロパティ値を調整することで解決に繋がります。

今回、h1要素で包含されたわけですから、パラグラフと同様、heading要素としての余白が現れるのは当然です。
img要素はvertical-alignの規定値として、未指定の場合、baselineというプロパティ値を持っているのですが、この値は、img要素に関してはテキストの下端に対して余白を持っています。
そして、h1の余白は内容物の上下から計算されるのですが、IEでは内容物の上端下端から計算し、このbaselineの余白を無視してしまいます。
本来であれば余白も含んで計算されるべきです。それがFFで表示した際に現れた、
> 画像の下にわずかに意図しないスペースができてしまいます。
> これはGeckoエンジンの特徴でしょうか？
Geckoだけの仕様ではありません。
事実、特徴とかではなく、これが本来の仕様です。
IEで余白が無いのは単なるバグです。

さて、ということで、どうすればいいのかということになるのですが、
実際、img要素の隣にテキストを表示することなど少ないと思います。
まぁ、それは関係ないのですが。ってことで、一括的に指定してしまいましょう。

img {vertical-align:text-bottom;}

という指定を。

これは、
a img {border:none;}
と同じくらい頻出な指定だと思います。私は。

私もまだまだ未熟なので誤りがあるかもしれませんが、そのときはすみません。。

お礼

quadsさん、ありがとうございます。

img要素にvertical-align:text-bottomを指定したところ、うまくいきました。
本当にありがとうございました。

やはりIEのバグだったんですね。
次期バージョンのIEはW3Cに準拠した解釈が行われることを期待します。

回答No.4

quads

なるほど。

これはタブやスペースによるインデントとは全く関係ありません。

p要素によるパラグラフとしての上下の余白によるものです。

少なくともIEでは、リスト要素やパラグラフ要素として元々備える余白の扱いが異なります。
本来であれば、その要素の前後に何も要素が無くとも余白が発生すべきなのですが、IEでは前後に何の要素（テキスト）もない場合は、余白が無視されます。

余白などの挙動が気になる場合は、それぞれのブロック要素に、borderプロパティやbackground(-color)プロパティを指定して確認してみてください。
挙動の違いが一目瞭然です。

div要素直下にテキストを含むのは（匿名ブロックボックスとなり）問題ないので、
●p要素での包含をやめる
●div要素での包含に変更
●セレクタでマージンを指定
などを考えてください。

今、上部のマージンについて考えられていますが、下部についても同様です。

ある（大きな）ブロック要素の内容に関しても、上端部、パラグラフ、下端部、という構成を認識し、適切な構成（余白など）を指定するように心がけていただければ、ある程度のクロスブラウザが可能になると思います。

>>#4補足
問題ないのであれば良かったです。
しかし、最終的には、検証ツールで引っかからなくてもブラウザの解釈の違いで理想形が崩れてしまうことがあります。

完成した後、検証ツールに引っかからなかったから完璧だ。とは思わず、構成に問題が無いか人の目で再確認することが大切です。

それでは、頑張ってくださいｗ

補足

あぁ～、恥ずかしい…。
quadsさんのおっしゃるとおり、p要素の余白でした。
p要素にmargin:0をつけると、問題なく表示されました。
ありがとうございました。

回答No.3

quads

IEでもFFでも、タブによるインデントは表示結果に影響を与えていないように思われます。
少なくとも、ブロック要素間に記述しているので、影響があるとしても要素（テキスト）の末端に半角スペース分の領域が発生するくらいかと。

補足ですが、
<container>
<menu></menu>
<content><content>
</container>
というような構成でフロートされていますが、このままでは不適切だと思われます。

●content要素にwidth指定が無い
contentの内容量によっては構成が完全に崩れます。
IEでは理想とされる表示になりやすいですが、バグです。

●container要素に包含される要素が全てフロートされている
container要素の領域が計算されない可能性があります。
container要素もフロート化(float:left)させることで解消されるかもしれません。

●フロートが解除されていない
container要素内部でフロートが解除されるのであればcontainer要素自体をフロートさせる必要はないかもしれません。

<header></header>
<container></container>
<footer></footer>
というような構成なのであれば、footer要素にclear:bothなどを指定することも考えられますが、前後の余白の解釈がブラウザによって異なる可能性があります。

今回は、Strictで作成されているので、br要素のclear属性は利用できません。

それらの点にも注意してみてください。

補足

アドバイスありがとうございます。

回答No.2

Kuppycat

同じ環境ですが、特に問題なく表示できました。
フォントの違いでそのように見えるだけなのでは？

補足

アドバイスありがとうございます。

フォント等の設定はデフォルトのままです。
さらに付け加えるならば、bodyにfont-familyを設定しているので、
フォントの違いということは考えられないと思います。

回答No.1

Desires

WinXP SP2 の Firefox 1.0.6 と IE 6 SP2 で確認表示してみましたが、当方の環境では、同じような表示されかたがされ、問題無なく表示されますよ？

質問者さんのブラウザバージョンとOSバージョンはなんですか？

お礼

すみません。補足です。

ファイルはhead内にスタイルシートを書き込んでいますが、
実際には外部ファイルを読み込んでいます。

補足

早速の回答、ありがとうございます。

こちらの環境は、そちらとまったく同じです。
具体的には、OSがWindows XP SP2で、
ブラウザがIE 6.0 SP2とFirefox 1.0.6です。

HTMLのバージョン等も念のため書き込んでおきます。
バージョン：HTML 4.01
DTD：HTML 4.01 Strict（システム識別子あり）