DIV+CSS建站对浏览器的兼容性问题和注意事项
使用DIV+CSS构架好处不少，但也确实存在一些问题，现在让网页设计师最头疼的事莫过于DIV+CSS对浏览器的兼容性了，可能你用惯了IE6，做出来的东西没感觉到有多大异常，但是把同样的东西放到IE7里去看的话，就会发现很多问题，如果放到火狐浏览器里去看，结果更不尽人意。
一个页面从制作的开始就决定了他要使用的浏览器解析css模式，浏览器模式的不同，就造成了各个浏览器对页面显示的差异。浏览器解析css有两种模式,quirks mode和strict mode,目前正在使用的浏览器这两种模式都支持，在doctype声明中, 没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
这两种模式最大的不同就是提现在对盒模式的解释上。什么是盒模式？这是针对块级元素说的，这里简单说一下，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。而区别就是产生在width属性上。
在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% ，因此不会被显示，此点在采取层布局的时候需特别注意。
·边界值可为负，其显示效果各浏览器可能不相同 �
相关文档：
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题
vertical-align:middle; ......
选择器 语法 描述 示例 标签选择器 E{ .....} 以文档元素作为选择符 td{font-size:14px;
......} ID选择器 #ID{...} 以文档元素的惟一� ......
转自：http://www.div-css.com/html/XHTML-CSS/hack/1136667.html
区别不同浏览器，CSS hack写法：
区别IE6
与FF
：
background:orange
;*
background:blue
;
区别IE6
与IE7
：
background:green
!important
;background:blue
;
区别IE7
� ......
看看下面这段代码，是否倍感亲切但又觉得很陌生呢：
.test {
background-color: black; /* firefox, opera, ie8 */
[;background-color: green;] /* safari, chrome */
*background-color: blue; /* ie7 */
_background-color: red; /* ie6 */
}
html*~/**/body .test {
border: 5px solid ......
原文:http://www.52css.com/article.asp?id=1026
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.
1.div的垂直居中问题
vertical-align:middle;
将行距增加� ......
