奇妙なHTML5スライスされたイメージのマージントップ＆ボトムの問題

Question

HTML5とHTML5を比較すると、スライスされたイメージを自分のウェブサイトに配置するときに奇妙な問題が発生します。

以下の例のページを参照してください：

• HTML4 version
• HTML5 version

あなたはHTML5版で見ることができるように、不要なマージンが画像マージントップ&下に表示され、削除することはできませんCSSオーバーライドを介して。 HTML5バージョンをHTML4バージョンと同じに見えるようにするにはどうすればいいですか？

P.S. 2つのファイルの唯一の違いは、ヘッダDOCTYPE宣言です。

Answer 1

img {vertical-align: bottom;}をCSSに追加します。

Answer 2

はIMGS

Answer 3

があなたのCSSにimg { display: block; }を追加&表からの高さ&幅を削除してください。 HTML5により、ブラウザはHTML4とは若干異なるインラインのものをレンダリングします。

詳細については、Mozillaのこの有益な記事を参照してください。https://developer.mozilla.org/en/Images%2C_Tables%2C_and_Mysterious_Gaps