欢迎您访问我爱IT技术网,今天小编为你分享的是IE技巧方面的电脑教程:【让旧版IE浏览器也能拥有最新的CSS3酷炫效果!】,平时在使用IE浏览器上网的时候,总会遇上这或那的问题,那本文就针对这些日常的问题收集并整理成IE技巧分享给大家!
让旧版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浏览器也能拥有最新的CSS3酷炫效果!的用户使用互动如下:
相关问题:运用css3+html5可以做出什么酷炫的动画效果不用js
答:酷炫的动画效果主要是用CSS3做的。 所以你好好学一下CSS3 就可以了。 比如translate,animation 等。 >>详细
相关问题:如何让IE浏览器支持CSS3属性
答:1、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法... >>详细
相关问题:支持CSS3的浏览器有哪些?
答:现在流行浏览器的最新版本都支持CSS3了,因为不支持就意味着被淘汰。 例如IE, Chrome, FireFox, Safari, Opera这5大浏览器,IE9以后也开始追赶,IE10以后支持情况已经很好了。 支持最好的应该是Chrome和FireFox了。看看下面这张图就知道对CSS3的... >>详细
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
