HTML5 DoctypeはDIVの高さを上げますか？

私はHTML5のDOCTYPEにHTML5 DoctypeはDIVの高さを上げますか？

<!DOCTYPE html>

を使用してdivの内側に画像を置く場合は、Mac上のクロム、サファリ、またはFirefoxでページをレンダリング、divが一貫して4ピクセル高すぎるレンダリングされます。私は古いDOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

を使用した場合のdivは、それ内の画像と同じ高さである、正しくレンダリングされています。これはまったく同じHTMLとCSSコードを使用しています。変更されるのはdoctypeだけで、余分な4ピクセルが表示されます。これを修正する方法はありますか？

出典

2011-07-14 Jarrod Ballou

あなたはそれが本当にHTML5とは何の関係もありませんhtml5reset.org – Catfish

HTML5は、要素内の空白をレンダリングすることを指定します。そのために4pxを余分に使います。たとえば、font-sizeを0に設定すると、スペースは消えてしまいます。

出典

2011-07-14 21:10:47 Johan

を見てみる必要があります。それは "標準モード"と "非"です。 'font-size：0'はそれを修正するために動作しますが、通常の修正ではありません。 – thirtydot

これは本当ではない、なぜ私は3票を得たかわからない。以下の答えが有効です。 – MMM

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html> =標準モード - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> =ほぼ標準モード - http://jsbin.com/ogacor/2

imgにdisplay: block又はvertical-align: top（又はbottom）を追加し、それを修正します。

これが最初に発生する理由は、imgがデフォルトでinlineの要素であり、vertical-alignのデフォルト値がbaselineであるためです。ベースラインは含まれている要素の底には触れません - ギャップは2つの間の距離です。

参照：

出典

2011-07-14 21:22:13 thirtydot

HTML5 DoctypeはDIVの高さを上げますか？

答えて

関連する問題