针对主流浏览器的CSS兼容性的研究及应用

开篇：润墨网以专业的文秘视角，为您筛选了一篇针对主流浏览器的CSS兼容性的研究及应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要:互联网近几年飞速发展,网页浏览器也越来越多种多样,而对于网页设计者来说,这是一件麻烦事,因为不同的浏览器公司的核心技术也都不一样,这就让网站显示的效果也出现了偏差。而且对于目前兼容性最为良好的CSS布局来说,也同样有这样的问题。本文主要针对目前使用最为广泛的两款浏览器:IE和Firefox,浅谈CSS的Hack技术。

关键词:浏览器;CSS;Hack;兼容性

中图分类号:TP311.52 文献标识码:A 文章编号:1007-9599 (2012) 13-0000-02

一、引言

随着计算机网络的普及,上网浏览越来越广泛,网络上的各种各样的网站也五花八门,内容丰富多彩。而每个人每台计算机使用的网页浏览器也是各种各样,这样对于网页设计者来说,是一个既头疼有具有挑战性的事情。所以网页兼容性问题从来都是经久不衰的话题。

二、CSS在不同浏览器产生的问题

(一)Web标准的建立

CSS提供了对网页布局和设计的创造性控制,不仅维护站点更加容易,而且还可以使HTML代码更加简练,缩短浏览器的加载时间。CSS与HTML共同起作用,但CSS不是HTML,它是一种完全不同的语言。HTML把信息组织到标题、段落、无序列表等元素中,给文档提供结构;CSS则与网页浏览器携手,使HTML显得更加美观。由于将内容与表现形式分离,CSS的使用也得到广泛的运用。

早在1966年,CSS1规范就被建立,同时也结束了极富表现力的HTML,将它们与网站包含的数据分离开来。在2000年,所有的主流浏览器都完全具有合适显示纯css布局的能力。但是只要有一部分访客仍固执地使用IE6.0或者更老的浏览器,设计师和开发者就会对采用CSS设计感到犹豫。因此必须做一些事情,让大部分的设计师与开发者感到Web标准是“安全”的。

Web标准化是2000年以后提出的新方法和新模式,W3C(即World Wide Web Consortium)希望以此标准改善网络表现层的面貌。Web标准化的目标是使用统一的技术与模式进行网站设计,从而提升网站的可用行性、改善网站结构、降低网站成本,使用统一的标准为未来的兼容打下基础。

(二)CSS兼容性的产生

到目前,由于CSS的标准越来越完善,优势越来越明显。基本上大多数网站设计者都使用CSS的布局设计,现在基本上网络上运行的网站,不论是主流门户网,还是主流论坛,或者各型个人网站,均采用CSS设计。

从互联网兴起之日起,浏览器的争战就从未停止过。IE、Netscape、Opera在90是年代成为主流,随着微软公司将IE捆绑在windows 98销售之后,IE就成功占据了浏览器市场,然而随着互联网的不断发展,浏览器就如同雨后春笋般增多,比如拥有自己内核的Firefox、Google公司的Chrome以及后来兼容了PC机的苹果公司的Safari。另外使用IE内核的国内浏览器也越来越多:遨游、360、腾讯、搜狗公司等也相继推出自己的浏览器,并迅速占领市场。

浏览器内核,(即:Rendering Engine,译为“解释引擎”),浏览器内核是浏览器最重要或者说核心的部分,它负责对网页代码的解释(如HTML、JavaScript),并渲染成网页。浏览器引擎决定了浏览器如何显示网页的内容以及页面的格式信息,如果两个浏览器的内核不同,其内核对网页代码的解释可能就不同,同一网页在两个不同内核的浏览器中显示的效果可能就会不同,夸张的甚至无法显示。

三、CSS Hack的原理和原则

目前浏览器市场可谓是百花齐放百家争鸣,版本繁多,而且各个浏览器的内核技术也不尽相同,它们对CSS的解释也就会出现偏差,这就造成在前台页面的显示出现不一样,有些差别细小,有些却是差之毫厘失之千里。有时候网站设计者自身代码的不标准,也会造成页面效果的偏差,这些问题,就是CSS的兼容性的问题。

对于代码不标准的问题,这个是比较容易解决而且是主观存在的问题,一方面完善自己代码编写,使用标准的CSS的代码,另外一个主要的问题就要从浏览器的内核的解释原理入手,消除各浏览器解释的差异,以达到出现在浏览页面正常显示的效果,这个客观存在的,网站设计者并不能左右,这也是必须解决的。所以我们就要针对不同的浏览器,编写适用的相应CSS代码,这也就是CSS Hack。

(一)CSS Hack的原理

由于不同的浏览器对CSS的支持及解释结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。

类内部Hack:比如 IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线“_”,而Firefox两个都不能认识。这是hack技术中,使用最多的一种。

选择器Hack:比如 IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。这一类的用的比较少。

HTML头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

(二)网页hack遵循的原则

关于网页显示要兼容哪些浏览器,主要遵循三个原则:

1.使用者的需要

这里所说的使用者,并不是指浏览网页的用户,而是指需要制作网站的站点拥有者。因为每个网站的出现都有其目的,目的不同,需要使用的技术、需要注意的问题也有所区别。如果网站的目的只是针对特定的用户群体,那么兼容问题也就有了相应的针对性。