浏览器的兼容性

摘 要 ：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 patibility problem because the browser kernel. In this paper, a brief description of monly used browser patibility skills and cited several monly 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的兼容

*+与*是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}