你对DIV+CSS建站对浏览器兼容性和注意事项是否了解，这里和大家分享一下，一个页面从制作的开始就决定了他要使用的浏览器解析css模式，浏览器模式的不同，就造成了各个浏览器对页面显示的差异。
DIV+CSS建站对浏览器兼容性和注意事项
使用DIV+CSS构架好处不少，但也确实存在一些问题，现在让网页设计师最头疼的事莫过于DIV+CSS对浏览器的兼容性了，可能你用惯了IE6，做出来的东西没感觉到有多大异常，但是把同样的东西放到IE7里去看的话，就会发现很多问题，如果放到火狐浏览器里去看，结果更不尽人意。
一个页面从制作的开始就决定了他要使用的浏览器解析css模式，浏览器模式的不同，就造成了各个浏览器对页面显示的差异。浏览器解析css有两种模式,quirksmode和strictmode,目前正在使用的浏览器这两种模式都支持，在doctype声明中,没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirksmode呈现，其他的则使用strictmode解析。
这两种模式最大的不同就是提现在对盒模式的解释上。什么是盒模式？这是针对块级元素说的，这里简单说一下，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些DIV+CSS属性构成了盒模式。而区别就是产生在width属性上。
在strictmode中：
width是内容宽度，也就是说,元素真正的宽度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
在quirksmode中：
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多处改进,但它们都是在StrictMode下实现的,即在页首声明DocType为XHTMLTransitional,XHTMLStrict等.而在QuirksMode下,IE7和IE6别无二致。所以为了更好的兼容，尽量声明DocType，采用StrictMode进行制作。
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中：内容宽度=您定义的容器宽度(InternetExplorer'width')-padding宽度-border宽度
(InternetExplorer'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.在mozillafirefox和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*/
【编辑推荐】
