DOCTYPEはCSSに影響しますか？

私は内部に（未知のサイズの）イメージを持つ固定サイズのコンテナを作りたいと思っています。次に、イメージをコンテナにフィットさせて、イメージを中央に配置したい（水平と垂直の両方）。私が思いついたのは：DOCTYPEはCSSに影響しますか？

<!DOCTYPE html> 
<html> 
    <body> 
    <div style="width: 500px; height: 375px; display: table-cell; 
       vertical-align: middle"> 
     <img src="./Slideshow_files/Charles Bridge In Prague.jpg" 
      style="max-width: 500px; max-height: 375px"> 
    </div> 
    </body> 
</html>

いくつかの画像ではうまくいきます。しかし、this one（正確にはサイズ500x375）は、外側のdivの高さを底部の375px（Chromeでは5px、Operaでは4px）よりも数ピクセル高くします。何故ですか？？

EDIT：hereのデモを追加しました（また、display: table-rowとdisplay: tableの要素を持つ別のデモはhere）。どちらの場合も、赤い背景が表示されません。 Chromeで& Operaです。

出典

2011-07-11 akoprowski

まず最初は、私は質問のタイトルを見たときのけれどもだった：IE。 IEが私のサイトを適切に表示していなかったので、私は一晩でとても怒っていました。後で私は 'DOCTYPE'を逃したのでそれがすべてであることを発見しました。 – Shaz

さて、私はIEにも行きませんでしたが、私はChromeとFFの両方でこの問題を抱えています。 DOCTYPEがCSSの解釈に影響を与えるのは普通ですか？（btw。私はあなたの不満を完全に理解することができます、それはまた、それがDOCTYPEに起因することを理解するためにしばらく時間がかかりました）。 – akoprowski

はい、正常です。 doctypeを変更すると、ブラウザが異なるレンダリングモードに強制され、ボックスモデルの解釈方法が調整されます。新しいサイトで作業している場合は、HTML5のdoctype '<！DOCTYPE html> 'の使用を強くお勧めします。 –

imgにdisplay: blockまたはvertical-align: top（またはbottom）を設定することで問題を解決できます。

癖モード
ほぼ標準モード
標準モード

異なる文書型が異なるレンダリングモードをトリガー：

は、3つの異なるレンダリングモードがあります。参照：http://hsivonen.iki.fi/doctype/

標準モード（トリガ型）では、デフォルトのvertical-alignはbaselineです。

デフォルトモード（doctypeなし）では、デフォルトのvertical-alignはbottomです。

このページには、それをうまく説明：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

出典

2011-07-11 13:33:05 thirtydot

魅力的な作品です！インライン要素の後ろにある余白/スペーシング/パディングがあるので問題はありましたか？ – akoprowski

説明とリンクを含むように私の答えを更新しました。 – thirtydot

恐ろしい！偉大な答えをありがとうございました。 – akoprowski

DOCTYPEはCSSに影響しますか？

答えて

関連する問題