视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用PIE.htc让IE678支持CSS3部分属性_html/css
2020-11-27 16:40:37 责编:小采
文档

万恶的IE内核浏览器,这是多少前端程序员头疼的事情。。今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的border-radius、box-shadow、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。

会的朋友提供一下建议,不会的朋友学习一下。

下载地址:PIE.htc

要使用 PIE 应用就要先把它引进来,这里不是在 html 文件里面引入,而是在 css 文件里面使用 behavior 来对文件进行导入。这里会涉及到一个路径的问题。比如 当前文件在“/”下 ,CSS文件在“/CSS”下,PIE.htc在“/CSS”下,behavior: url(/css/PIE.htc)而不是behavior: url(PIE.htc) 。

ps :PIE.htc URL路径是相对于当前HTML文件,不是CSS文件.

以下代码都是基于下面这段公共的样式进行编写:

div{text-align: center;border: 1px solid #204D74;width: 200px;height: 100px;line-height: 100px;}

1. border-radius 圆角

.borderRadius{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ABCDEF; behavior: url(css/PIE.htc);}

运行效果图

ps :不支持单边的圆角属性,比如: border-top-left-radius,但是你可以这样来写:

.borderRadius{ border-radius: 0px 20px 0px 20px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; background: #ABCDEF; behavior: url(css/PIE.htc);}

运行效果图

2 . box-shadow 盒子阴影

.boxShadow{ box-shadow: 10px 10px 10px #000; -webkit-box-shadow: 10px 10px 10px #000; background: #ABCDEF; behavior: url(css/PIE.htc);}

运行效果图

3 . CSS3 Backgrounds 背景渐变

.linearGradient{ background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/ background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/ background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/ background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/ background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/ background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/ -pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/ behavior: url(css/PIE.htc);}

运行效果图

ps :只支持linear-gradient(线性渐变)

4 . RGBA

.rgba{ background: rgba(0,0,0,.6); -pie-background: rgba(0,0,0,.6); behavior: url(css/PIE.htc);}

黑色背景,透明值为60%

ps:不支持box-shadow

5 . IE6 下的 png 图片的透明问题

.png img{ -pie-png-fix: true; behavior: url(/PIE.htc);}.png{ background-image:url(img.png); -pie-background:url(img.png); behavior: url(/PIE.htc);}

ps:图片直接用-pie-png-fix: true,背景图片使用-pie-background来修复IE6下png透明的问题

由于我这边没有IE6内核的浏览器,所以这个就无法测试给大家看了,要是有兴趣的可以自己试试看。不过我觉得这个也没有那么重要了,毕竟IE6基本都被舍弃了,现在很多公司最旧的版本也就兼容到IE7,再老的就变成老古董了。

6 . background-size 背景包含补充

.backgroundSize{ background:#ABCDEF url(wait.png) center no-repeat; background-size: contain; /*behavior: url(css/backgroundsize.min.htc);*/ behavior: url(css/backgroundsize.min.htc);}

没有加htc的效果

加htc运行效果图

框框的宽高的是200x100,图片的宽高是180x180,这样图片的高就超过了框的边界,如果使用背景图片就要使用到background-size来让背景图片被包含,但是IE9以下是不支持的。

caniuse.com

以上的是我暂时对PIE的用法的一个理解,要是有更多的用法,请给我留言!如有更多知识,会继续补充!

下载本文
显示全文
专题