让旧版IE浏览器也能拥有最新的CSS3酷炫效果！

微软新版IE9浏览器的推出确实让很多网页开发者们都兴奋了一把，因为IE9已经能够支持CSS3标准，因为在也不用为浏览器不支持网页标准而发愁了。不过目前市场占有率最高的还是旧版的IE浏览器，开发者们也不能弃之不顾。那么如何才能让这些浏览器也能支持目前最流行的新一代网页标准CSS3呢？ CSS3到底有多好用 大多数的当代网页设计，扣除掉透过Flash和Sliverlight，大致上都是使用HTML+CSS的组合进行设计，而HTML的最新版本为HTML5，而CSS3则是CSS的接替者。 那CSS3到底多了什么功能呢？举个最简单的例子而言，在Web 2.0的时代，许多网站都很喜欢使用圆角的设计，不管是在页面的按钮、或是文字框等都会使用圆角让画面更好看。然而这个简单的圆角效果制作起来却是相当麻烦，透过传统的CSS2，我们只能透过自己先在Photoshop等绘图软体将圆角的图桉设计好、输出成图片后，在以背景的方式整张贴到网页上。 像是以下的图像便是通过CSS3在最新版Safari浏览器中所呈现出来的，这中间完全没有使用到任何一个图片！详情可以查看该文：用哆啦A梦来测试四大浏览器对CSS3的支持 这样做的缺点自然是相当花费时间、且裁切出的图片也不能重复利用，更别提加载这些图片需要额外的网络带宽了。同样的道理也发生在画面的阴影效果、渐层效果等，没有CSS3我们只能透过一张张静态的图片去堆叠出我们想要的效果。 然而目前CSS3的支持状况诚如序文所提到的，大多数的现代浏览器像是Chrome/Safari/Firefox/Opear等均已经支持了CSS3上述的大多属性，而IE9也同样的支持。然而大多数的使用者可能使用的是IE6~IE8的版本，那该怎么办呢？目前常见的作法便是摆着，就让IE6~IE8的使用者们看不到圆角、阴影等效果，毕竟这些效果往往只是锦上添花，即便没有这些特效网站也都能够正常的浏览。 CSS3 PIE 而CSS3 PIE便是一个能够解决上述问题的方便工具。透过JavaScript的模拟，CSS3 PIE替IE实作了包含圆角、阴影、渐层和多重背景等CSS3所支持的内容，让旧版的IE浏览器也能够像其他新的浏览器一般直接的读取CSS3的样式代码，就不需要另外花费而外的时间制作图片了。 而要如何使用CSS3 PIE呢？首先我们必须先从官方网站上面下载原始代码，下载后解压缩会是两个.htc档，其中一个是有压缩过、一个则是没有压缩过的，除非是要研究里面的样式代码细节，否则直接使用压缩的版本即可。 接下来我们的CSS样式代码当中加入相关的CSS属性，并且附上与这隻.htc档的连结： div#header { -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; behavior: url(PIE.htc); } 前两行-webkit和-moz开头的分别是为了WebKit系列（Safari、Chomre）的浏览器和Mozilla系列（Firefox）浏览器所的CSS3规则，而第三条则是给CSS3 PIE所使用的。 透过这样的指定与加入.htc档，IE便可以自动的读取这隻JavaScript并且显示出正确的CSS 3效果哦！ 结论 CSS3的方便性让许多开发者纷纷在新的网页专桉中进行尝试，而透过CSS3 Pie更可以将CSS 3的支持加入IE浏览器中，让CSS 3真正能够灵活的使用在工作的专桉上。 参考资料：CSS3.info – 详细介绍CSS3的网站

标签:IE浏览器IE技巧CSS3