浏览器的兼容性解析

摘要：CSS因其优越性在网页设计中被广泛应用，但因为各种浏览器的内核不同存在兼容性的问题。该文对常用浏览器兼容性技巧进行简要说明，并列举了几个常用的解决技巧。

关键词：CSS；浏览器；CSS HACK；float

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）04-0707-02

Browser Compatibility Analysis

FENG Shu-jie

（Tianjin Binhai Polytechnic Information Department of Information Engineering，Tianjin 300451，China）

Abstract： CSS because of its superiority in web design is widely used， but there is a compatibility problem because the browser kernel. In this paper， a brief description of commonly used browser compatibility skills and cited several commonly solving skills.

Key words： CSS； Browser； CSS HACK； float

“我做的网页在我的电脑里页面布局看起来很正常，为什么到了别人的电脑里就发生了变形？”，学习网页设计的朋友们都遇到过类似的问题。实际上这都是由于浏览器不兼容导致的。

浏览器的数量众多，我们只能针对内核来进行划分，这样主流的浏览器主要是三个内核：微软的trident内核、FF的mozilla内核、chrome为代表的webkit内核。由于不同的浏览器，对CSS的解析认识不同，因此会导致生成的页面效果不同，CSS样式表对浏览器的兼容性问题有时让人很头疼，不过当我们了解了其中的原理与技巧，就会觉得轻松一些，总体来说做浏览器兼容性测试只要测试通过了上述浏览器，一般问题就不大了。

1 统一思想，遵循标准

“没有规矩，不成方圆”，要想制作好网页，首先优先遵循W3C推荐的标准。

Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。

web标准是一场革命，作为一个页面工程师，要学会熟读标准，认识和了解标准。要检验你的代码是否和标准一致，要了解W3C标准的优势和用意，假如用语言距离，普通话让中国人彼此能够沟通，英语让世界人可以沟通。W3C标准就是让页面在不同的终端都可以运行，让使用各种终端的用户都能浏览你的页面，也就是跨越平台，获得更大众化的用户的使用。

2 常见兼容性技巧

2.1 CSS HACK

CSS HACK技术则前端开发中必用的，是指为了兼容各浏览器而使用的特别的Css定义技巧，以下两种方法几乎能解决现今所有HACK。

2.1.1 ！important

！important即优先权声明，主要用于兼容IE与firefox浏览器，随着IE版本的升级，原本为了兼容IE6与Firefox而使用的！important， IE7以上版本都将执行。

；

2.1.2 针对firefox的兼容

*+html与*html是IE所特有的标签，firefox暂不支持。对于上述标签可以通过如下格式代码实现兼容：

3 浮动的兼容性问题

浮动属性石网页布局中的常用属性之一，使用浮动属性不但可以很好地进行内容布局，而且可以制作导航条等页面元素，但由于不同版本的浏览器对float的解析不同，运行效果大不相同。

解决float闭合

在IE7.0中，常常会把浮动的子元素作为父元素的内容来处理，这和firefox中的处理方式不同，同时因为IE7.0中的内容和容器关系和IE6.0中的不同，所以浮动元素的显示和IE6.0中的也不同。

通过clear float的原理可以解决float的兼容性问题。

.mm{width：300px；

Padding：20px}

.nn{

width：150px；

height：150：

Padding：20px

background： #333333；

Float： left}

显示效果：定义浮动元素的nn后在firefox浏览器中不能实现高度自适用；解决方法可以设置伪类.after的值来定义对象的内容。

.mm： after

{content：”.”；

Clear： both；

Height：0

Display： block；

Visibility： hidden；}

使用伪类.after生成的内容代替原来附加的div， height取值为0的目的是使新添加的内容不影响元素的总体高度，IE6.0不支持伪类.after，所以不会对其造成任何影响，从而实现兼容。

4 其他技巧

1）在Firefox下为div设置padding后会导致width和height增加，但IE可以用！important解决

2）垂直居中：将line-height设置为与当前div相同的高度再通过vertical-align：middle实现，但是内容不能换行

3）水平居中：margin：0 auto；（不是万能的）

4）如果需要设置a标签内容的样式，则需要设置display：block.

5）ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明， 以避免不必要的麻烦. （常见于导航标签和内容列表）

6）作为外部 wrapper 的 div 不要定死高度， 最好还加上 overflow： hidden.以达到高度自适应.

7）关于手形光标. cursor： pointer. 而hand 只适vNXXdCUUBnXu1vaDUPQJSCXYNfxYu4N1hm9eJmq2IMI=用于 IE.

5 结束语

随着各种网站技术的不断发展，IE版本不断更新，各个公司不断抢占市场等因素的影响，现在各种浏览器之间的兼容性问题已经成为开发者越来越重视的问题，只有使自己设计的网页被所有的浏览器所支持，才能将制定的效果完全展示在用户面前，为了以后更全面的体现CSS样式给我们带来的优势，这就要求我们以后在学习实践中不断地总结，更加的掌握解决方法。

参考文献：

[1] 王大平.CSS网页布局[M].北京：电子工业出版社，2008.

[2] 陆凌牛.HTML5与CSS3 权威指南[M].北京：机械工业出版社，2011.

[3] 如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器[EB/OL].http：//www.jb51.net/css/37635.html.