Use DIV + CSS page layout is actually very easy to do, but the problem of incompatibility between the various browsers, increasing the difficulty of the layout of the page, bring a lot of inconvenience to programmers, so it takes more time commissioning of various browser compatibility on. Because there will be differences between the CSS properties in different browsers parse the result, which is due to individual browser vendors to resolve some CSS properties are not designed according to the W3C standards. This is also the reason beginners often think the layout is difficult to understand. Escape is not the way to solve the problem, because each browser will have its use of the crowd, a good website layout needs can see the same interface on all browsers. Even if you can not debug into various browsers display was exactly the same, but also to ensure roughly the same.
Although you can use the browser there are many, but usually during debugging page layout will be divided into two types IE and non-IE. Mainly due to Microsoft's IE browser is not designed according to the W3C standard, rather than the IE browser are almost in line with W3C standards, like Safari and Firefox browsers parse CSS is almost the same. In addition, even more disturbing is that there are multiple versions of IE (IE 5, IE 6, IE 7, IE 8, etc.), CSS parsing there are also many differences. Although it is time-consuming debugging for compatibility with IE, but still take an additional some effort on it, after all, account for a large IE browser market share. But the people using IE 5 less do not consider it to be, the general compatibility IE browser only for IE 6, IE 7 and IE 8 on it, each new version of IE appeared in moving to standardize non-IE browsers use Firefox browser can be represented. Compatibility issues need to be addressed when there are a lot of DIV + CSS page layouts, this section can only give solutions to some common compatibility problems.
1 different browsers interpret the box model differences
CSS box model is an important concept to understand the box model in order to better layout. Different browsers different interpretation of the box model. In fact, the box, there are two models, namely box model IE (IE browser Series) and standard W3C box model (non-IE browser), as shown in FIG.
FIG box model 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声明，声明代码如下所示：
This transition provides the DTD XHTML 1.0, which requires a very loose, it allows you to continue to use HTML 4.01 logo, but to comply with the wording of XHTML. I recommend using the latest and simple method DOCTYPE declaration, just few characters, the code is as follows:
Although the DOCTYPE declaration solve most of the problems, but there will still be individual tags and style are not compatible; DOCTYPE statement or not, we need to write different CSS for different browsers, it can be compatible with different browsers is that in different browsers can get page effect we want.