摘 要：浏览器种类不同、版本不同，对CSS解析不同，导致同一个网页编码在不同浏览器显示效果不同，甚至错位。本文主要分析浏览器兼容性及CSSHach技术应用。
　　关键词：CSS；兼容性；CSS Hach
　　中图分类号：TP393.092
　　目前主流的浏览器有IE、Firefox和Chrome三大浏览器，三种浏览器对CSS样式标解析不同，而且同种浏览器的版本不同对CSS样式表解析也不同，如IE浏览器，IE6与IE7、8、9对CSS样式表在布局上解析就有很大区别，常出现在IE7、8、9下显示正常页面到IE6下显示乱码。网页开发者掌握CSS浏览器兼容性必须掌握。
　　1 CSS层叠样式表
　　CSS[1]层叠样式表是W3C制定一系列标准之一。CSS样式表对网页元算样式的设置，如字体、布局设计、元素定位、背景设置、颜色、图片效果、鼠标变幻和表格样式设置。CSS可以直接使用HTML内部標签或自己命名来定义CSS样式，CSS样式的使用使得网页的内容和网页表现形式分开，有利于快速统一对网页样式的控制。目前常用的CSS版本有2.1版和3.0版。
　　2 导致网页在不同浏览器下显示效果不同的原因
　　网页在不同浏览器下显示效果不同主要是因浏览器开发商开发产品时没有采用统一标准，它们按自己的标准，它们对HTML和CSS解析不同，主要分为以下几类。（1）不同浏览器对HTML内部标签属性值解析不同。如body标签内边距默认值不同，IE默认为Padding=10px；firefox下内边据为20px。项目列表UL、OL的默认值不同，在IE浏览器中默认内边据约40px，而firefox的默认值为0。（2）不同浏览器对CCS解析不同，如嵌套盒子之间的距离，若父Div的高度，小于子div的“高度+margin-top”值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及元素自身的padding-bottom；而firefox就不会，它会保证父元素的height高度的完全吻合，而这时子元素将超过父元素。（3）CSS版本不同，造成兼容性问题。
　　3 浏览器兼容性常见问题
　　（1）浏览器对项目列表UL、OL的默认值不同，解决这个问题可通过CSS给UL、OL确定内边距：UL，OL{list-style：none；margin：0；padding：0；}。（2）单行文字在div中垂直居中问题。Div没有垂直居中属性，解决方法设置div的行高等于div的高：{line-height：50px（div高值）；}。（3）Margin自动加倍。Div若被设float，则在浏览器IE6下会左外边距加倍，解决方法是在这个div里加css样式：{ display：inline；}。（4）IE浏览器下DIV浮动文本产生3象素，解决方法左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距margin-right：-3px；代码如下，其显示效果如图1：