从CSS看浏览器的兼容性

访问量大了,用什么浏览器的鸟都有,用什么鸟浏览器的都有。

现在的浏览器种类太多,版本太多。而且每个种类的各个版本,都有用户在使用。

不要让用户产生疑惑:咦,这个网站怎么在公司电脑上看着挺好的,回家了看就乱七八糟的呢?

想让所有用户都能没有障碍地看到和分享你的劳动成果?那就提高你网站的浏览器兼容性吧!那就让你的网页在各个浏览器下都能呈现出相同的表现和行为!

其实浏览器的兼容性包括两个方面,就是刚才说的——表现和行为

  • 表现的兼容性,简单说现就是同一个网页在不同浏览器里显示的样子会不一样。这个是和CSS密切相关的。
  • 行为的兼容性,一般表现为Javascript执行状况会不一样。这个方面本文暂不讨论,有兴趣的童鞋可以自己Google下——不要急,等看完这篇文章的
现在有哪些常用的浏览器呢?

IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera, 360, 搜狗, 遨游, 世界之窗, 腾讯TT。

不用慌,要透过现象看本质。下面是按照浏览器的引擎分类:

  1. Trident:IE6, IE7, IE8, IE9, 360, 搜狗, 遨游, 世界之窗, 腾讯TT
  2. Gecko:Firefox
  3. Webkit:Chrome, Safari
  4. Presto:Opera
根据经验来看,使用Gecko和Webkit的浏览器对Web标准支持最到位,相同的代码在它们的渲染下样式基本没有差别。Presto对Web标准支持得也不错,但偶尔会出现一些小问题。

最让人头疼的,就是Trident的那些玩意儿了。

国内公司的这些浏览器就不讨论了,都是跟着IE走的。IE的版本越高,对Web标准的支持越好。

现在还用IE5的话就是个悲剧了,基本绝种,可以不考虑。但是IE6在国内占有的比例还是相当大的,至少有半壁江山。IE9出来之后还没有专门调试过前端样式,不敢妄言。

所以最终浏览器的兼容问题,主要就缩略到了IE6, IE7, IE8 和 Firefox的兼容问题。解决了它们之间兼容性之后,再考虑其他浏览器吧。

要做好浏览器的兼容,我觉得理解好以下的一些知识点会很有帮助:

  1. reset.css (Reset CSS的前生今世
  2. 正确理解盒模型
  3. block与inline
  4. float与clear
  5. CSS Hack
其实做浏览器兼容性,也就是将以上的几点做好。

稍后我会写几篇文章分别说一下鄙人的心得和看法,希望和大家讨论交流哈~

 

忍不住要先嚷嚷一句:做浏览器的兼容的时候,不要过于迷恋CSS Hack!Hack越多说明懂得越浅。

没啦~

 

原文参见: http://www.fancycedar.info/2011/03/browser-compatibility-on-css-0/

 

喜欢这篇文章?

欢迎订阅 PureWeber.com - 纯粹互联网。接收免费的更新提醒,以及订阅读者独家优质内容。

讨论

  1. Nersle 回复

    深有感触,很多时候,IE的bug会很莫名其妙。甚至有时候显示图片都有问题,换做Firefox就不一样了,或许是我学的太浅的原因吧。

    • 兼容性方面又很多细节上的东西,平时多多留心,把每一个小问题都研究清楚,积累起来就成专家咯。

  2. 顾超 回复

    360, 搜狗, 遨游都是开源的Webkit内核,只是兼容IE模式。

    • 嗯,这三款浏览器都是所谓的双内核,同时支持 Webkit 和Trident。

加入讨论

电子邮件地址不会被公开。 必填项已用*标注