css可用哪些方式兼容浏览器?

开发人员基本都知道,CSS的开发本身并不难,但是,当在不同的浏览器下测试代码时,困难就出现了。浏览器的 bug 和不一致的显示方式,是大多数CSS开发人员面临的主要难题,你的设计在一种浏览器上看起来很好,而在另一种浏览器上可能会支离破碎。

实践证明,CSS的兼容性主要有两种情况:一种是对老版本IE的兼容性,一种是使用CSS3新特性后产生的兼容性。

对老版本IE的兼容性,主要通过CSS Hack和客户端脚本来解决;对使用CSS3新特性后产生的兼容性,主要通过浏览器私有前缀来解决。

CSS Hack介绍

由于不同厂商的浏览器(如IE、Chrome、Firefox、Safari),或同一浏览器的不同版本(如IE6~IE11),对CSS的解析不完全一样,导致同一页面在不同浏览器中的效果可能不一致。

为了得到统一的效果,就需要针对不同浏览器,或同一浏览器的不同版本,编写不同的CSS,把这个过程就被称作CSS Hack。

实践证明,CSS Hack主要用来解决IE的兼容性问题。虽然它是强有力的工具,但应该谨慎使用,它一般作为修复问题的最后一道屏障,在不得已的时候才会使用。因为更重要的是跟踪、隔离和识别问题,而不是修复问题。只有真正了解问题背后的原理,才能找到最好的解决方案。

CSS Hack 有 3 种表现形式:

1)属性前缀或后缀法

即在定义样式规则时,为样式属性添加只有特定浏览器,或某浏览器特定版本才能识别的前缀或后缀。

表 10-1 常见的前缀后缀说明及应用示例
前缀/后缀适用版本应用示例
_IE6p { _color: blue; }
-IE6p { -color: blue; }
+IE7p { +color: blue; }
*IE6/IE7p { *color: blue; }
#IE6/IE7/IE8p { #color: blue; }
!importantIE7/IE8/IE9/IE10/IE11p { color: blue !important; }
\9IE6/IE7/IE8/IE9/IE10/IE11p { color: blue\9; }
\0IE8/IE9/IE10/IE11p { color: blue\0; }
\9\0IE9/IE10/IE11p { color: blue\9\0; }

在使用属性前缀或后缀法时,一般是将适用范围广、被识别能力强的写法写在前面,把特殊写法写在后面。如:

div {  
    background: blue;
    background: green\9; 
    *background: black; 
    _background: orange; 
}

由于所有浏览器都识别标准写法,而IE6/IE7/IE8/IE9/IE10/IE11可识别\9,IE6/IE7可识别*,IE6仅能识别_。根据CSS的叠加原理,后定义的属性会覆盖先定义的同名属性,就实现了为IE各版本和现代浏览器应用不同样式的目的。

2)选择器前缀法

即在CSS选择器前,添加只有特定浏览器或某浏览器特定版本才能识别的前缀,选择器和前缀之间用空格分隔。

常用的前缀有 *html 和 *+html,*html 是IE6特有的前缀,而 *+html 是IE7特有的前缀。如:

*html p { color: blue; }   /* IE6 */
*+html p { color: blue; }  /* IE7 */

3)条件注释法

条件注释是IE浏览器专有的,也是微软官方推荐的Hack方式。它是使用IE条件注释,针对不同IE版本,编写不同的CSS,来为不同版本的IE应用不同的样式。

一种方法是直接在条件注释中定义样式。如:

<style>
<!--[if IE 6]>
div {
display: inline;
}
<![endif]-->
</style>

虽然这种方法可以解决一些现实的问题,但这些注释需要放在HTML文件,而不是CSS文件中,样式定义散落在多个地方,不便于维护,也容易出错。也违背了内容与表现相分离的原则,故不推荐使用。

另一种方法是,编写不同的CSS文件,再使用IE条件注释,通过 <link> 标签,有针对性的加载外部样式表。如:

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->

这种方法却会增加IE用户的HTTP请求次数,影响访问速度。所以,在使用这种方法前,要仔细斟酌,判断是否真的有必要在自己的网站上使用它。

更多web前端知识,请查阅 HTML中文网 !!

以上就是css可用哪些方式兼容浏览器?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏