客户端脚本selectivizr，PIE，Respond.js

CSS很强大的一点是，它具有很强的向前兼容性：如果浏览器不识别某个属性或值，它会忽略这个声明；如果不识别某个选择器，它会忽略整个规则。

这意味着新的选择器、属性和值，不会对老的浏览器产生严重影响。因此，设计师就可以大胆的应用CSS3的高级规则和声明，而不必担心老浏览器是否能够识别。

事实上，这些高级规则确实给设计带来极大的便利，设计师都迫不及待的要使用它，并且希望它们在老的浏览器中，和现代浏览器中能够产生相同的效果。

幸运的是，网上存在大量的优秀脚本，可以让老的浏览器支持CSS3的一些高级特性。如，selectivizr、PIE、respond.js 等等。

selectivizr

selectivizr 是一个非常优秀的Javascript工具，它可以让IE6-8浏览器支持CSS3的伪类选择器和属性选择器等。

selectivizr的使用非常简单，但是并不能直接使用，需要在页面的 <head> 标签中，先加载如jQuery、dojo、prototype、mootools等诸多流行的Javascript库中的任意一个。然后，再使用IE条件注释，让IE6-8版本加载 selectivizr 脚本，剩下的工作就交给 selectivizr 来完成：

<script src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

其中，JS library 是你要使用的Javascript库，selectivizr会自动检测最佳的Javascript库，如果你没有使用任何 Javascript 库，则伪类选择器和属性选择器等就不起作用。使用不同的库，所能支持的选择器如图 10‑1 所示：

图10-1 selectivizr支持的库和选择器

需要注意的是，selectivizr只解析使用 <link> 标签引入或使用 @import 导入的外部样式表，而不解析在 <style> 标签中定义的样式，也不支持站外样式调用。

考虑到浏览器的安全机制，需要通过 http 或https协议访问页面才行，通过 file:// 协议访问页面，selectivizr则不能发挥它的正常功能。

PIE

PIE.js 也是一款不错的Javascript工具，可以使IE6-8支持CSS3的部分渲染效果，如圆角、盒阴影、边框图像、多背景图像、渐变背景等。

PIE的使用也非常简单，只需在页面的 <head> 标签中，使用IE条件注释，让IE6-8版本加载 PIE 脚本，并调用 PIE.attach() 方法，将所有需要按CSS3进行渲染的选择器名称，添加到PIE对象：

<!--[if lt IE 9]>
<script src="PIE.js"> </script>
<script>
$(function() {
$(".rounded").each(function() {
PIE.attach(this);
});
});
</script>
<![endif]-->

上述代码就表示，包含类 .rounded 的每一个元素，将按CSS3进行渲染。如果有多个选择器，需要按同样的方法都添加到PIE对象中。

使用Javascript 相对麻烦，因此，PIE还提供了 .htc 文件，使用起来更加方便，只需在相应的选择器中，通过 behavior 属性直接链接 pie.htc 文件即可。如：

.rounded {
border-radius: 8px;
behavior: url(pie.htc);
}

respond.js

respond.js 是一个快速、轻量的 Javascript 工具，它可以为IE6-8 提供媒体查询的 min-width 和 max-width 特性，使它们能够支持响应性设计。

respond的使用及其简单，只需在页面的头部，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script src="respond.js "></script>
<![endif]-->

说明：.htc 文件

.htc 文件是一种脚本文件，用来描述 web 行为，web 行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件来完成这个功能。

由于只有IE才能认识 .htc 文件。因此，常常用来解决 IE 特有的问题。如，在 IE6 及更低版本中，只有链接元素 a 才支持 :hover 伪类选择器。

csshover.htc 是一个脚本，只需下载该脚本，并在 body 的元素选择器中，通过 behavior 属性的 url 指向它，就可以让锚以外的元素支持 :hover 伪类选择器。如：

body { behavior: url(csshover.htc); }

这样一来，就可以在CSS中，定义诸如 div:hover、li:hover、p:hover、img:hover、自定义选择器:hover，使 IE6 及更低版本支持在图像、列表等元素上使用 :hover 伪类选择器。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。