使用DIV + CSSページのレイアウトは非常に簡単に行うのは実際にあるが、様々なブラウザ間の非互換性の問題、ページのレイアウトの難易度が高く、プログラマに不便の多くをもたらすので、より多くの時間がかかります上のさまざまなブラウザの互換性の試運転。W3C規格に応じて、いくつかのCSSプロパティがデザインされていない解決するために、個々のブラウザベンダーによるもので、結果、解析異なるブラウザでのCSSプロパティの間の違いが存在しますので。また、これは初心者には、多くの場合、レイアウトが理解することは困難であると考える理由です。エスケープは、各ブラウザが群衆の使用を持っていますので、問題を解決する方法はありませんが、良いウェブサイトのレイアウトのニーズはすべてのブラウザで同じインターフェイスを見ることができます。あなたは様々なブラウザにデバッグすることができない場合であっても表示はまったく同じだったが、また、ほぼ同じことを確認します。
あなたは、ブラウザを使用することができますが、そこに多くありますが、通常はページレイアウトをデバッグ中に2種類のIEと非IEに分割されます。主にMicrosoftのIEブラウザのためには、むしろIEブラウザよりも、W3Cの標準に基づいて設計されていませんSafariとFirefoxはパースCSSがほぼ同じであるブラウザと同様に、W3C規格に沿ったもので、ほとんどです。また、さらに多くの妨害は、IEの複数のバージョン（IE 5、IE 6、IE 7、IE 8、等）、CSSの解析多くの違いもあるが存在することです。それはIEとの互換性を確保するため、デバッグ時間がかかりますが、まだそれに追加のいくつかの努力を取りますが、すべての後、大IEブラウザの市場シェアを占めています。しかし、人々がIE 5を使用して少ないことにだけIE 6、IE 7とIE 8のために、それがために、一般的な互換性のIEブラウザを考慮していない、IEのそれぞれの新しいバージョンでは、標準化への移行に登場しましたIE以外のブラウザは、Firefoxブラウザを表すことができます。互換性の問題がDIV + CSSページレイアウトの多くがある場合に対処する必要があり、このセクションでは、唯一のいくつかの一般的な互換性の問題の解決策を与えることができます。
1つの異なるブラウザは、ボックスモデルの違いを解釈します
CSSボックスモデルは、より良いレイアウトするために、ボックスモデルを理解するための重要な概念です。異なるブラウザボックスモデルの異なる解釈。実際には、ボックス、二つのモデルは、図1に示すように、すなわち、モデルIE（IEブラウザシリーズ）および標準W3Cボックスモデル（非IEブラウザ）ボックスがあります。
図のボックスモデル1
从图1（左）可以看到标准W3C盒子模型的范围包括margin、border、padding、内容区，并且内容区部分不包含其他部分。而从图1（右）可以看到，IE盒子模型的范围也包括margin、border、padding、内容区，和标准W3C盒子模型不同的是，IE盒子模型的内容区部分包含了border和padding。例如，一个盒子模型的margin为20px，border为1px，padding为10px，内容的宽为200px、高为50px。代码如下所示：
如果用标准W3C盒子模型解释，如图2所示，那么这个盒子模型需要占据的位置（包含外边距margin）和盒子模型的实际大小（不包含外边距margin）如下。
图2 标准W3C盒子模型解释
盒子占据的位置：
宽度 = margin*2 + border*2 + padding*2 + 内容的width = 20*2 + 1*2 + 10*2 +200 = 262px
高度 = margin*2 + border*2 + padding*2 + 内容的height = 20*2 + 1*2 +10*2 + 50 = 112px
盒子的实际大小：
宽度 = border*2 + padding*2 + 内容的.width = 1*2+10*2+200=222px
高度 = border*2 + padding*2 + 内容的.height = 1*2+10*2+50=72px；
如果用IE盒子模型解释，如图3所示，那么这个盒子需要占据的位置（包含外边距margin）和盒子模型的实际大小（不包含外边距margin）如下。
图3 IE盒子模型解释
盒子占据的位置：
宽度 = margin*2 +内容的.width = 20*2+200=240px
高度 = margin*2 + 内容的.height = 20*2+50=90px
盒子的实际大小：
宽度 = 内容的.width = 200px
高度 = 内容的.height = 50px
2 设置浏览器去遵循W3C标准
之前介绍让我们知道了不同浏览器对盒子模型的解释是有所差异的，那么应该选择哪种盒子模型呢？答案一定是“标准W3C盒子模型”。怎样才算是选择了“标准W3C盒子模型”呢？只要能让IE浏览器也按“标准W3C盒子模型”去解析页面即可。当然不只是盒子模型可以让IE浏览器按标准的W3C规范去解析，整个页面的CSS都可以让IE浏览器按标准的W3C规范去解析。那么应该怎样去做呢？其实很容易，就是在网页的顶部加上DOCTYPE声明。如果不加DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页。例如，IE浏览器会采用IE盒子模型去解释你的盒子，而Firefox浏览器会采用标准W3C盒子模型去解释你的盒子，所以网页在不同的浏览器中显示得就不一样。反之，如果加上了DOCTYPE声明，那么所有浏览器都会采用标准W3C盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
DOCTYPE定义当前文档的基本类型，即文档类型定义（DTD），用于告诉浏览器打开页面时应遵循什么规则。要建立符合标准的网页，DOCTYPE声明是必不可少的组成部分。DOCTYPE的声明及声明位置如图3所示。
图3 DOCTYPE声明及声明位置
其实DOCTYPE只是一组机器可读的规范，虽然中间包含了文件的URL，但浏览器不会去读取这些文件，仅用于识别，然后决定以什么样的规范去执行页面中的代码。开始制作符合标准的站点时，第一件事情就是声明符合自己需要的DOCTYPE。而XHTML 1.0提供了三种DTD声明可供选择，分别为：过渡的（Transitional）、严格的（Strict），以及专门针对框架页面设计使用的DTD（Frameset）。这里笔者推荐DOCTYPE声明是过渡的DTD，这也是最常用的DOCTYPE声明，声明代码如下所示：
この遷移は、それはあなたがHTML 4.01のロゴを使用するのではなく、XHTMLの文言に準拠し続けることを可能にする、非常に緩いが必要ですDTD XHTML 1.0を提供します。次のように私は、ほんの数文字を最新かつ簡単な方法のDOCTYPE宣言を使用することをお勧めします、コードは次のとおりです。
DOCTYPE宣言は、問題のほとんどを解決するが、それでも個々のタグとスタイルが存在しますが、互換性はありません。DOCTYPEステートメントまたはない、我々は別のブラウザごとに異なるCSSを記述する必要が、それは別のブラウザと互換性を持つことができます別のブラウザで私たちが望むページの効果を得ることができるということです。