ウェブページを閲覧する為のInternet Explorer,Opera,Firefoxなどのブラウザには、(X)THML上で宣言された文書型定義（DTD）に応じて表示モードを切り替えてしまう機能が備えられています。これを !DOCTYPE スイッチ（!DOCTYPE Switching）といいます。
表示モードとは、それぞれの互換性を重視した後方互換モードと、W3Cの仕様を重視した標準準拠モードです。ウェブサイト制作者が仕様に準拠して正しい書式に沿った文書を作成していれば何も問題はありませんが、ウェブ技術の進歩に未対応の場合や、一部問題のある記述をしている制作者もいる為に、文書型定義（DTD）に応じて表示モードを自動的に切り替えてしまう機能が備わっています。
DOCTYPEによる解釈の違い
DOCTYPEによる解釈の違いはさまざまありますが、以下はレイアウト崩れ関係する部分です。
- paddingの解釈
- borderの解釈
サンプルソース
#sample{
width: 200px;
margin: 0;
padding: 0 10px;
border: 1px solid #cccccc;
}
上記ソースの場合、後方互換モードの解釈は200pxですが、標準準拠モードでは222pxとなります。つまり、標準準拠モードではpaddingとborderはwidthに含まないと解釈されます。
Internet Explorerでは上手く表示できたのに、Firefoxではレイアウトが崩れた,,,,というのは、これが原因の一端です。
関連情報：CSSレイアウト崩れの原因について
