码迷,mamicode.com
首页 > Web开发 > 详细

IE8不支持的部分css3属性处理

时间:2017-12-26 14:33:32      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:css   add   gpo   blog   body   str   back   ide   over   

IE8不支持的部分css3属性

1.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; 

1.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 盒子阴影

1.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);

 

1.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);

 

1.5 RGBA 颜色值

 

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

 

说明:不支持box-shadow

 

1.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来修复IE6png透明的问题

 

1.7 解决IE浏览器部分版本不支持background-size属性问题

 

 width: 1440px;
height: 667px;
background:url(slide-bg.jpg) top left no-repeat;

-ms-background-size:cover;
 background-size:cover;

filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘slide-bg.jpg‘,sizingMethod=‘scale‘);

 

1.8 解决低版本IE不兼容border-image

width: 900px;

height: 600px;
border-style: solid;
border-width: 33px;
-moz-border-image: url(1.jpg) 2 27 17 36 round;
-webkit-border-image: url(1.jpg) 2 27 17 36 round;
-o-border-image: url(1.jpg) 2 27 17 36 round;
border-image: url(1.jpg) 2 27 17 36 round;
behavior: url(PIE.htc);

 

1.9

opacity//元素透明度属性

使用filter:alpha(opacity:0);兼容IE8

IE8不支持的部分css3属性处理

标签:css   add   gpo   blog   body   str   back   ide   over   

原文地址:https://www.cnblogs.com/luoshang/p/8117295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!