下载

2下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 让IE6、IE7、IE8支持CSS3

让IE6、IE7、IE8支持CSS3.doc

让IE6、IE7、IE8支持CSS3

桉____
2012-04-29 0人阅读 举报 0 0 暂无简介

简介:本文档为《让IE6、IE7、IE8支持CSS3doc》,可适用于高等教育领域

让IE、IE、IE支持CSSSelectivizr让IE~支持CSS伪类和属性选择器一、下载和demo二、简介三、使用四、必须知道的一些注意事项PIE使IE支持CSS圆角盒阴影与渐变渲染一、PIE之简述DeanEdwards的IEjs (以及IEjs,IEjs)AaronGustafson的 eCSStenderDrewDiller的 DDroundiesRemizRahnas的NickFetchak的KeithClark的zoltandulac的二、效果预览、综合demo以及源文件下载三、PIE支持的主要CSS属性详解borderradius圆角boxshadow盒阴影gradient渐变multiplebackgroundimages多背景四、已知的一些问题zindex相关问题相当路径的问题缩写的问题提供正确的ContentType让IE、IE、IE支持CSS我们都知道IE并不支持CSS的属性IE也不能很好的支持CSS。但是有一个小脚本能够做到它可以让IE支持CSS包括:borderradius(rounded),boxshadow(shadow),textshadow等…… 如果你需要一个支持CSS的boxcontent你需要添加一行代码:behavior:url(iecsshtc)代码:box{  mozborderradius:px*Firefox*  webkitborderradius:px*SafariandChrome*  borderradius:px*Opera,futurebrowsers,andnowalsoInternetExplorerusingIECSS*  mozboxshadow:pxpxpx#*Firefox*  webkitboxshadow:pxpxpx#*SafariandChrome*  boxshadow:pxpxpx#*Opera,futurebrowsersandIEusingIECSS*  behavior:url(iecsshtc)*ThisletsIEknowtocallthescriptonallelementswhichgetthe'box'class*}下载此脚本:http:fetchakcomiecssiecsshtc 点击查看详情:http:fetchakcomiecss以上转自:http:wwwjavaeyecomnews  另外也有个CSSPIE的小脚本也可以同样让IE-IE支持CSS原理跟IE-CSS相似。项目地址:http:csspiecom下载地址:http:githubcomlojjicPIEdownloadsSelectivizr让IE~支持CSS伪类和属性选择器by zhangxinxu from http:wwwzhangxinxucom本文地址:http:wwwzhangxinxucomwordpressp=此项目首页:http:selectivizrcom一、下载和demo下载:您可以狠狠地点击这里:selectivizrzip(右键目标|链接另存为K)demo:您可以狠狠地点击这里:Selectivizr部分属性测试demo二、简介selectivizr是一个JavaScript工具使IE浏览器也可以支持CSS伪类以及属性选择器使用很简单只要把jsinclude到页面上然后你就可以(~o~)~zZ补觉了。优点在于:让老的IE浏览器支持个CSS伪类个伪元素以及所有的属性选择器。即使你完全不懂JavaScript也没有关系因为你只要链接这个文件就ok了。可以与现存的JavaScript库协调工作。三、使用直接调用JavaScript文件就可以了:<scripttype="textjavascript"src="JSlibrary"><script><!if(gteIE)(lteIE)> <scripttype="textjavascript"src="selectivizrjs"><script> <noscript><linkrel="stylesheet"href="fallbackcss"><noscript><!endif>zxx:由于某些原因我把上面连续的两个短连线给分开了上面的noscript的内容我个人觉得是可有可无的。按照原作者的说法JavaScript文件要放在页面的<head>标签里而且需要使用一种下图所示的JavaScript库。下图为JavaScript库和Selectivizr对CSS伪类等特性的支持情况表的截图(点击图片可查看大图):四、必须知道的一些注意事项Selectivizr自动检测最佳的JavaScript库如果你一个JavaScript库都没有调用则IE下的伪类是不起作用的。样式属性必须使用<link>标签但是你可以使用import在你的样式表里面以<style>标签定义的CSS样式是不会被解析的。由于安全原因样式文件需以域的形式调用像是file:是不起作用的。此效果非动态的。一旦样式被应用就被固定了DOM改变时不会映射过去的。如果JavaScript不可以你可以使用<noscript>标签调用一个用以反馈提示的样式文件。Selectivizr要想在IE下起作用需要时标准模式请检查您的页面头部是否有DTD。PIE使IE支持CSS圆角盒阴影与渐变渲染by zhangxinxu from http:wwwzhangxinxucom本文地址:http:wwwzhangxinxucomwordpressp=一、PIE之简述在国外CSS的盛行与普及探讨与研究要比国内领先不知多少个身位。相比之下国内似乎如一潭死水为何?我觉得国内领先的前端团队应该通过自身的影响力带动国内整个前端领域与时俱进。然而可以理解我们都是要养家糊口或是谈情说爱的我们不都是圣人有着以天下兴亡为己任的责任心与使命感所以呢要么等着别人喂要么闭门造车。这不说也罢。我们都知道IE浏览器暂不支持CSS的一些属性。国外的工程师们不安于此现状他们总是尽量使用一些手段使IE浏览器也能支持CSS属性我觉得这些都是很有意义很有价值的工作可以推动整个技术领域的进步的。都目前为止有不少可以让IE支持部分CSS属性的工具。例如:DeanEdwards的IEjs (以及IEjs,IEjs)这个玩意估计是试图让IE支持CSS属性的鼻祖还算蛮强大就是性能开销较大要解析很多文件脚本给DOM添加大量的元素以及ClassName。AaronGustafson的 eCSStender此方法支持fontface,CSS选择器,以及CSSBackgrounds和Borders。DrewDiller的 DDroundies这是一个基于IEVML实现一些CSS效果的。RemizRahnas的borderradiushtc此方法使用htc文件配合VML实现缺点在于不能自动适应目标元素的位置和大小所以不能适用于动态脚本环境。NickFetchak的 iecsshtc关于此方法我在前面的“让IEIEIE浏览器支持CSS属性”这篇文章中已经做过介绍。我是建议您看看这篇文章倒不是iecsshtc这个玩意多么好而是文中对htc文件以及VML预言做了些介绍对于您了解IE下实现类似CSS效果原理有所了解。KeithClark的iecssjs这是个与IEjs类似的项目其选择器可借助其他JavaScript库所以其本身较小。zoltandulac的cssSandpaper关于此方法我在“cssSandpaper兼容IE的CSSJavaScript库”一文中有过介绍这是一个使用IE滤镜实现一些CSS属性的方法。这里就不再具体展开了。而本文要展示的这个方法名为PIE在白云黄鹤BBS上有个pie版就是一个专门征婚征男女朋友征K歌旅游玩版的版块。所以pie有寻找朋友之意显然在这里这样解释有些牵强还有种说法说PIE有“工艺整合工程师或者制程整合工程师”的意思(ProcessIntegrationEngineer)这种解释似乎更为贴切整合一些CSS属性使IE浏览器得以支持。恩恩……这里PIE实际上是指的是一个名为pie的htc文件即piehtc使用CSS的behavior行为可以调用此文件然后让IE也能实现一些常见的CSS效果如圆角(borderradius)盒阴影(boxshadow)背景渐变(gradient)多图片背景(multiplebackgroundimages)。具体如何使用都有哪些效果呢?不要走开广告之后马上回来!……(广告开始……护舒宝……妇炎洁……维达纸巾……脑白金……XXX点读机……霸王生发液……广告结束)二、效果预览、综合demo以及源文件下载您可以狠狠地点击这里:控制面板综合demo下为IE浏览器下该面板及效果截图您可以修改上面的参数以动态查看效果:例如修改渐变的起始颜色为红色结果如下图所示:下载该项目详尽原始的下载资源在这里:http:githubcomlojjicPIEdownloads三、PIE支持的主要CSS属性详解PIE方法的使用与平时我们使用CSS属性一样基本上没有什么特殊的样式名称只要链接piehtc文件即可。borderradius圆角关于CSSborderradius的基本属性您可以参见这里。CSS代码如下:pieradius{width:pxheight:pxbackgroundcolor:#bmozborderradius:pxwebkitborderradius:pxborderradius:pxposition:relativebehavior:url(piehtc)}相应的html代码如下:<divclass="pieradius"><div>结果在IE浏览器下的效果如下截图:您可以狠狠地点击这里:PIE使IE实现CSS圆角demoboxshadow盒阴影关于CSSboxshadow盒阴影的基本属性您可以参见这里。CSS代码如下:pieboxshadow{width:pxheight:pxbackgroundcolor:#bmozboxshadow:pxpxpx#webkitboxshadow:pxpxpx#boxshadow:pxpxpx#position:relativebehavior:url(piehtc)}相应的HTML代码如下:<divclass="pieboxshadow"><div>结果在IE浏览器下的效果如下:您可以狠狠地点击这里:PIE使IE实现CSS盒阴影效果demogradient渐变关于CSS的渐变属性我在“CSS渐变之CSSgradient在Firefox下的使用 ”、“CSS实现兼容性的渐变背景(gradient)效果”中做了相当详细的介绍您有兴趣可以去看看。如果使用PIE实现IE饿渐变背景该如何呢?需要用到一个自定义的CSS属性piebackground后面的写法与火狐浏览器类似。CSS部分代码如下:piegradient{width:pxheight:pxbackgroundcolor:#Fbackground:webkitgradient(linear,,bottom,from(#F),to(#))background:mozlineargradient(#F,#)piebackground:lineargradient(#F,#)position:relativebehavior:url(piehtc)}相应的html代码如下:<divclass="piegradient"><div>结果如下图(截自IE浏览器):您可以狠狠地点击这里:PIE使IE实现CSS渐变背景色效果demomultiplebackgroundimages多背景此CSS属性接触较少尚未详细研究过此处略!四、已知的一些问题此方法并不是万能的也有一些局限性和需要注意的地方。zindex相关问题IE下这些CSS效果实现是借助于VML由VML绘制圆角或是投影效果的容器元素然后这个容器元素作为目标元素的后兄弟节点插入如果目标元素position:absolute或是position:relative则这个csscontainer元素将会设置与之一样的zindex值在DOMtree中同级的元素总是后面的覆盖前面的所以这样就实现了覆盖又避免了可能有其他元素正好插入其中。所以问题来了如果目前元素的position属性为static也就是默认属性则zindex属性是没有用的无覆盖可言所以此时IE浏览器下CSS的渲染是不会成功的。要解决也很简单设置目标元素position:relative或是设置祖先元素position:relative并赋予一个zindex值(不可为)。相当路径的问题IE浏览器的behavior属性是相对于HTML文档而言的与CSS其他的属性不一样不是相对于CSS文档而言的。这使得使用piehtc文件不怎么方面。如果绝对路径于根目录则CSS文件不方便移动如果相对路径与HTML文档则piehtc文件在不同HTML页面见的重用性大大降低。同时诸如borderimage后面的URL属性路径也不好处理。缩写的问题使用PIE实现IE下的CSS渲染(其他方法也是一样)只能使用缩写的形式例如圆角效果我们可以设置bordertopleftradius表示左上圆角但是PIE确实不支持这种写法的只能是老老实实的缩写。提供正确的ContentType要想让IE浏览器支持htc文件需要一个有着”textxcomponent”字样的contenttype头部否则会忽视behavior。绝大数web服务器提供了正确的contenttype但是还有一部分则有问题。例如的我的空间域名商就没有”textxcomponent”字样的contenttype可能是出于安全的考虑。如果您发现在您的机子上PIE方法无效也就是htc文件这里指piehtc文件无效检查您的服务器配置可能其需要更新到最新的contenttype。例如对于Apache您可以在htaccess文件中左如下处理:AddTypetextxcomponenthtc但是由于某种原因您无法修改服务器配置(例如公用主机或是空间服务商提供的服务器)您可以用一个PHP文件来间接调用htc文件。我只要给你看下这个PHP文件的代码您就知道什么意思了如下:<phpheader('Contenttype:textxcomponent')include('piehtc')>通过PHP文件来增加一个含有“textxcomponent”字样的Contenttype头同时调用piehtc文件。关于上面所示的php文件您可以狠狠地点击这里:piephp(右键–目标|链接另存为)或者您可以直接新建一个php文件把上面的两行代码复制进去。或者在本文提供的原始打包资源的wrappers文件夹里面也有此php文件不过名称是大写的。如果您使用上述php文件您需要将piephp和piehtc放在同一个文件夹目录下同时CSS中的behavior写法应该是:

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/16

让IE6、IE7、IE8支持CSS3

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利