css3属性ie8是不是都不支持

css3属性ie8是不是都不支持

ie8支持部分css3的属性,如box-sizing,伪类选择器:after、::after、:before、::before以及css导入样式的语句@import。

下面表格记录了关于css3的各种常用属性对ie各版本浏览器的兼容程度。

(相关课程推荐:css视频教程

最低可兼容ie7

最低可兼容ie8

最低可兼容ie9

最低可兼容ie10

position:fixed

clip

E:first-letter

E::first-letter

E:first-line

E::first-line

box-sizing

E:after/E::after

E:before/E::before

@import

border-radius

box-shadow

background-size

background-origin

background-clip

background-image

background-repeat

background-position

opacity

transform

@media

E:not(s)

E:nth-child(n)

E:only-of-type;

单位: rem 、 vw 、 vh 、

deg 、 s 、 ms 、 rgba 、

display:flex

display:inline-flex

border-image

text-shadow

user-select

flex

align-items

transition

animation

@keyframes

IE8不支持的部分css3属性

1. border-radius 圆角

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);

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

border-radius 圆角
border-radius: 5px 10px 15px 20px;

2. box-shadow 盒子阴影

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
behavior: url(/PIE.htc);

说明:不支持text-shadow(文本阴影)

box-shadow 盒子阴影

3. border-image 图片边框

color: white;
border: 8px solid #013D7A;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-image: url(img/border.png) 8 8 8 8 stretch;
-moz-border-image: url(img/border.png) 8 8 8 8 stretch;
border-image: url(img/border.png) 8 8 8 8 fill stretch;
behavior: url(PIE.htc);

4. CSS3 Backgrounds 背景渐变

background: #CCC; 
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); 
background: -webkit-linear-gradient(#CCC, #EEE); 
background: -moz-linear-gradient(#CCC, #EEE); 
background: -ms-linear-gradient(#CCC, #EEE); 
background: -o-linear-gradient(#CCC, #EEE); 
background: linear-gradient(#CCC, #EEE); 
-pie-background: linear-gradient(#CCC, #EEE); 
behavior: url(PIE.htc);

说明:只支持linear-gradient,并且不可以为渐变制定方向(线性渐变)

高级运用:

background-size: 50px;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
behavior: url(/PIE.htc);

5. RGBA 颜色值

padding: 60px 0;
background: #000;
background: rgba(0,0,0,.2);
-pie-background: rgba(0,0,0,.2);

说明:不支持box-shadow

6. 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);
}

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

本文来自css答疑栏目,欢迎学习!

以上就是css3属性ie8是不是都不支持的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏