質問: html5の宣言で画像に隙間が出来るのは何故? とても複雑な画像構成で、リンクなどが大量にあるのでテーブルレイアウトでその部分は作成を進めました。 具体的には、イラストレータからスライスしたhtml(テーブル)と画像になります。 そこで質問なのですが、html5の宣言であるを記述すると、画像なのかテーブルなのか隙間が空いてレイアウトが崩れてしまいます。とても使える状態ではなくなります。 そこで、宣言をhtml4やxhtmlなどに変更すると綺麗に表示されます。 ↑などの宣言です。 色々調べてみると、imgに対してvertical-align: bottomやtop;を指定することで回避できるような記事があり試してみるのですが、隙間が少しは小さくなるのですがやはり表示がおかしく隙間が多々発生いたします。 とり合えず、xhtmlの宣言にしているのですが、この根本的な原因は何に起因するものでしょうか? cssでも強制的に色々と定義を試してみたのですが、効果が薄く又は全く効果がありませんでした。 宣言をhtml5で行わない場合には綺麗に表示されます。 流れ的にhtml5で記述できればと思うのですが、そもそもテーブルレイアウトを行っている時点でngなのでしょうか?(今回は画像が表という認識で割り切ってテーブルレイアウトにしました) どなたかhtml5の宣言で同じ様な不具合問題に遭遇された方いらっしゃいましたら、解決された際のアドバイスを頂けないでしょうか。 とても不思議な現象です...。 宜しくお願いします。
回答: もしかしたら、外しているかもしれません。その時は、ご容赦を 過去互換と標準の違いは、今回の場合ボックスモデルの取り方の違いかな?と思います。 なので、table周辺のボックスを過去互換と同じ解釈をさせればいいと思います。 table,table *{ box-sizing:border-box;/*widthやheightにpaddingやborderを含める*/ } また、イラストレータでのwebサイト作成は最新の技術に対応できます。フラットデザインと相性がいい上に、svgデータとして利用できます。小さくても大きくても荒れないしブラウザも古すぎなければ対応しています。