ちょっと前に、こんな記事を書きました。
【Web開発】vertical-alignの謎—画像下の余白に悩む
配置した画像の下にちょっとした空きが出てしまう、という記事なのですが、これとは別に、もっと大きな空きが出てしまうのです。下の画像で、バナー画像とメニューの間に変な空きがありますね。
本来は、こう出て欲しいのです。ビシッと妙な空きがなく配置されていますね。
空きの場所に、妙なマークアップがあるのでは？と思いましたが、<br>要素と高さ0の<img>要素を持った<a>のみです。
いろいろ調べましたら、大きな違いは、マークアップの冒頭部で宣言するDOCTYPEスイッチにありました。これまで（空きのない状態）では、「XHTML 1.0 Transitional」でしたが、現在新しくWebサイトプロジェクトを生成すると、「XHTML 1.0 Strict」になるのです。1番目の画像は、Strictが指定されている状態のものでした。
このStrictをTransitionalに変更しましたら、2枚目の画像のように空きがなくスッキリと表示されるようになりました。マークアップは変わらないようです。
そもそもStrictとTransitionalの違いって何よ？と、今まではDOCTYPEスイッチのことなどまじめに調べたこともなかったのですが、どうやら規格を厳密に守る、移行期なので大目に見る、の違いのようです（ほかにFramesetというフレーム使用のものもあるようです）。
大きな違いはXHTML（この場合）の規格を厳密に守るかということなのですが、ブラウザのレンダリングにも影響を与えているようですね。同じマークアップ、同じスタイル指定で、微妙な違いが出てくるのですから。
ちなみに、上のマークアップ画面はChromeのものですが、Chromeでは動的にマークアップを削除できます。試しに高さ0の<a>要素を削除しましたら、空きは引っ込みました。
これはつまり、高さ0のはずなのに、line-height属性かheight属性の解釈で高さを持っている、ということのようです。
正直、これ以上の詳しいことは経験知不足でわかりません。ですが、せっかくStrictで構成されたものをTransitionalに落として、何だかよくわからないまま使い続ける、というのも気持ち悪いものです。
次回フォローするとなれば、このあたりが解決されたときとなりそうです。
コメント