HTML5とXHTMLでレイアウトが変わっちゃうんだけどォ!

imgres

昔買った参考書のサンプルサイトを写経していたんです。

XHTMLで組まれていたんですが、HTML5で組み直していたらレイアウトがちょっと崩れていました。

img要素を内包したh1要素が上下に4pxほど膨張していたのです。

原因は未だによくわかっていませんが、h1にheigtを指定したら解決しました。(h1とimgの高さが一致した)

ですが、何かスッキリしません。

モヤモヤ解消のため少し調べてみたら、以下の様な記事を見つけました。
html5のテーブルの画像に3pxの隙間が出来る件

なんか似た内容なのかなあと思い、試しにreset.cssに { vertical-align: bottom; } を指定してあげたら、概ね解決しました。

今度は逆にサンプルよりも縮んじゃった箇所も出てきちゃいましたけど。。。

もうちょっと調べる必要があるみたいです。

問題の起こる箇所はブロック要素がimg要素を包含している点で共通している気がします。

誰か原因がわかるひといたら教えて下さい。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. あずぴちょん より:

    bottomではなく、text-bottomを入れたらどうでしょうか▼
    vertical-align: text-bottom;

    現象が起きたhtmlコードを見てみたいです。

    • beeans より:

      あずぴちょんさん

      コメントありがとうございます!
      HTMLコードは以下です。

      XHTML
      HTML5

      それぞれの違いは以下です。
      【HTML】DOCTYPE宣言などの冒頭4行
      【CSS】HTML5のほうのみ *{vertical-align: bottom;} を設定

      vertical-align: text-bottom;でも微妙にレイアウトが変わりますが、根本の解決には至りませんでした。