HTML5の宣言で画像に隙間が出来るのは何故？

Question

とても複雑な画像構成で、リンクなどが大量にあるのでテーブルレイアウトでその部分は作成を進めました。
具体的には、イラストレータからスライスしたHTML（テーブル）と画像になります。

そこで質問なのですが、HTML5の宣言である<!DOCTYPE html>を記述すると、画像なのかテーブルなのか隙間が空いてレイアウトが崩れてしまいます。とても使える状態ではなくなります。

そこで、宣言をHTML4やXHTMLなどに変更すると綺麗に表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

↑などの宣言です。

色々調べてみると、imgに対してvertical-align: bottomやtop;を指定することで回避できるような記事があり試してみるのですが、隙間が少しは小さくなるのですがやはり表示がおかしく隙間が多々発生いたします。

とり合えず、XHTMLの宣言にしているのですが、この根本的な原因は何に起因するものでしょうか？
CSSでも強制的に色々と定義を試してみたのですが、効果が薄く又は全く効果がありませんでした。
宣言をHTML5で行わない場合には綺麗に表示されます。

流れ的にHTML5で記述できればと思うのですが、そもそもテーブルレイアウトを行っている時点でNGなのでしょうか？（今回は画像が表という認識で割り切ってテーブルレイアウトにしました）

どなたかHTML5の宣言で同じ様な不具合問題に遭遇された方いらっしゃいましたら、解決された際のアドバイスを頂けないでしょうか。
とても不思議な現象です…。

宜しくお願いします。

ORUKA1951 · Accepted Answer

それはですね。互換モードだからです。当たり前ですが、DOCTYPEが、だったら、ダメなはずです。　は、すべて標準モードで描画されます。　互換モードとは、かってのIEの独自スタイルに合わせるためのもの(^^)と言ってもよいかと。ご存知のように、1999年(15年前)のHTML4.01の勧告以来 HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) であり、それはやであることと同義です。 DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) ＞HTML5の宣言であるを記述すると、画像なのかテーブルなのか隙間が空いてレイアウトが崩れてしまいます。いずれにしろ、その表示のほうが正しいということです。改善策・・・まず、＞とても複雑な画像構成で、リンクなどが大量にあるのでテーブルレイアウトでその部分は作成を進めました。＞具体的には、イラストレータからスライスしたHTML（テーブル）と画像になります。　この作り方をやめること。イラストレーターなんて最悪ですよ。20年も前にすたれた。 ↓これも15年前からですが(^^) ・メーカー独自拡張のHTMLを使う。・テキストを画像に置き換えて表現する。<----------× ・余白制御のために画像を用いる。<-----------------× ・ページレイアウトの目的で表を用いる。<----------× ・HTMLでページを作らずにプログラムに頼る。<----× 　スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 『スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』　なのです。どんな複雑なデザインであろうと、HTMLで率直に文書構造だけをマークアップしてスタイルシートでデザインすれば、イラストレーターで作るよりはるかに色々できる。　　その辺りはナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　のページをIEやfirefox（chromeはダメ)で訪問して、ブラウザの表示メニューから「スタイル(シート)」を選択して、色々なデザインを選択してごらんなさい。またウィンドウ幅を変えたり、印刷プレビューも試されるとよいです。　HTMLには文書構造しか書かれていないために、変更があってもHTML/CSSのメンテナンスも楽ですし、点字端末やスクリーンリーダーでもきちんと読んでくれる。　ページを右クリックしてソース表示を見たらわかるようにHTMLは誰が見てもわかる簡単なものですしね。　もちろん、デザインの変更も容易です。・・・実際にスタイル変更できるでしょ。 ※スタイルシートで無理くり、苦労してデザインを期待通りにできますが、それは本道ではないでしょう。

ごんじろう · Answer

もしかしたら、外しているかもしれません。その時は、ご容赦を

過去互換と標準の違いは、今回の場合ボックスモデルの取り方の違いかな？と思います。

なので、table周辺のボックスを過去互換と同じ解釈をさせればいいと思います。
table,table *{
box-sizing:border-box;/*widthやheightにpaddingやborderを含める*/
}

また、イラストレータでのwebサイト作成は最新の技術に対応できます。フラットデザインと相性がいい上に、svgデータとして利用できます。小さくても大きくても荒れないしブラウザも古すぎなければ対応しています。

ORUKA1951 · Answer

下記部分がリンクに変わってしまうので＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿であり、それはやであることと同義です。￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ http: をhttp：に置換してある。

HTML5の宣言で画像に隙間が出来るのは何故？

それはですね。

もしかしたら、外しているかもしれません。

下記部分がリンクに変わってしまうので

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング