标签：
在strict mode中：
width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
在quirks mode中：
width则是元素的实际宽度 ，内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
其他要注意的事项：
·内联元素 ，例如<a>、<span>等，定义上下边界不会影响到行高(line-height)，内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 注2. 内联元素(display: inline) 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
·浮动元素(无论左或者右浮动)边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
·边界值可为负，其显示效果各浏览器可能不相同 。
·填充值不可为负 。
·边框默认的样式(border-style)为不显示(none)
IE6，IE7及FF火狐浏览器的区别和兼容方法：
1. IE7与IE6相比, 有多达200多处改进, 但它们都是在Strict Mode下实现的, 即在页首声明DocType为XHTML Transitional, XHTML Strict等. 而在Quirks Mode下, IE7和IE6别无二致。所以为了更好的兼容，尽量声明DocType，采用Strict Mode进行制作。
2. IE7支持Alpha通道的PNG图片， 但是这些Alpha通道图片在IE6下还是不能正常显示的，所以还是尽量使用透明GIF图片。
3. IE7盒子模型改变了：盒子对于”overflow”使用了”visible”默认值,所以对于子元素尺寸大于父元素尺寸时, IE7会和Firefox一样将子元素露出于父元素之外显示, 而不是像IE6那样把父元素撑大了包含子元素.把页面设置成”overflow:visible”即可。
4. 设置为float的div在ie下设置的margin会加倍。这是一个ie6存在的bug。解决方案是在这个div里面加上”display:inline”。
5. IE和火狐对’width’定义的不同：
Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度；
IE中：内容宽度=您定义的容器宽度(Internet Explorer ‘width’)-padding宽度-border宽度
(Internet Explorer ‘width’则是指整个容器的宽度，包括内容，padding ，border)
6. css布局的居中问题：FF火狐里设置margin-left, margin-right 为 auto 时已经居中, IE则设置body {TEXT-ALIGN: center;} 才行
7. FF火狐设置padding后, div会增加height和width, 但IE不会, 故需要用 !important 多设一个height和width
8. 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
9. ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
10.终结解决方法：
(1)!important：FF火狐和IE7对于”!important”会自动优先解析，IE6则忽略,可用!important为FF火狐和IE7单独设置样式，不影响IE6的显示，值得注意的是，一定要将xxxx !important 这句放置在另一句之上。
示例：div{margin:30px!important;margin:15px;} //在FF火狐和IE7中margin:30px，在IE6中margin:15px;
(2)由于FF火狐和IE7都支持”!important”，而二者之间也存在差异，所以有时也会出现一些小问题，针对IE7可以使用使用”*+html”，
示例：#example { color: #333; } /* FF火狐下字体颜色显示为#333 */
* html #example { color: #666; } /* IE6下字体颜色显示为#666 */
*+html #example { color: #999; } /* IE7下字体颜色显示为#999 */
其他注意事项：
1. float的div一定要闭合，即清除浮动
示例：(其中floatA、floatB的属性已经设置为float:left;)
<div> <div id="floatA"></div> <div id="floatB"></div> <div id="NOTfloatC"></div> </div>
这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
所以得在<div id=”floatB”></div>后边加清除浮动<div></div>
定义如下.clear{clear:both;}
2. 注意margin加倍的问题
现在DIV+CSS布局里用的最多的要数margin和padding了(为了兼容性都尽量少用),设置为float浮动后的div在ie下设置的margin会加倍，所以要在这个div里面加上display:inline;
示例：<div id=”FloatA”></div>
相应的css为
#FloatA{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}标签：
原文地址：http://www.cnblogs.com/8minutes/p/4824623.html
