类似break-word断行，z-index手动分层，还有像垂直对齐等等这些偏门CSS最好少用，因为不一定所有浏览器都支持，而且极难通过W3C检测。
二、center不是float的值。
很多新手都会把center误认为是float的值，而偏偏不是如此。center只是text-align的值。
三、对齐不能包括两个值。
很多新手会在float或者text-align中填写两个值，比如：float:left top。这是不允许的，浏览器也无法识别。
四、滚动条颜色最好不要自定义。
很多浏览器不能正常识别自定义颜色的滚动条，况且很多自定义颜色都不能通过W3C。
五、单独滚动条设置。
现在经常使用overflow-x（横向滚动条）或者overflow-y（纵向滚动条），在设置这个的时候经常会发现并不是所有的客户端上都有效果，大家在设置的时候最好在body和html同时进行设置。然而这个CSS也不是CSS2.1支持的（CSS2.1支持overflow，同时定义横纵滚动条），直到CSS3才支持这种定义方式。尽量少用。
DIV＋CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV＋CSS网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV+CSS设计的网页，就应该更注意IE6 IE7 FF对CSS样式的兼容.
什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，在这种浏览器下显示正常，在另一种下就乱了，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。
一、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:
#example {
width: 100px !important; /* IE7+FF */
width: 103px; /* IE6 */
}
二、CSS HACK的方法
首先需要知道的是：
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下面的这种方法比较简单
举几个例子：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
解释一下4的代码：
读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px
到了第二行*height:30
辽公网安备:42900402000182号