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來修復IE6下png透明的問題

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屬性處理