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

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

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

时间： 2024-10-15 00:34:19

IE8不支持的部分css3属性处理的相关文章

JS判断浏览器是否支持某一个CSS3属性的最佳实践

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 检测方法 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /**2017-01-05 * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false

JS判断浏览器是否支持某一个CSS3属性

1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 2.检测方法 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: Js代码   /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/fa

IE系列不支持圆角等CSS3属性的解决方案

IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF.Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种方式也会有诸多问题,对页面结构改动较大,需要对自适应大小进行控制等,成本较高. 另外一种是百度了一下,发现有个开源的插件可以解决此问题:http://css3pie.com/ 使用方法很简单,下载了之后直接引用.htc文件即可. 附: htc = HTML Comp

js解决IE8不支持html5，css3的问题（respond.js 的使用注意）

IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8浏览器能将h5标签转化为块元素 respond.js   是让ie8支持css3的js <!--[if lt IE9]> <script src="html5.js"></script> <script src="Respond.js&q

JS判断浏览器是否支持某一个CSS3属性的方法

var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "" //如果不支持的话, 会输出 undefined. //新版本的浏览器不用判断前缀了, 老版本的浏览器还是需要判断前缀 //可参考: http://www.jb51.net/article/56412.htm

判断浏览器是否支持某一个CSS3属性

function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.toUpperCase(); }); };

document.documentElement.style判断浏览器是否支持Css3属性

1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAnimation等 2.判断浏览器是否支持制定的css属性 function support(cssName) { var htmlStyle = document.documentElement.style; if (cssName in htmlStyle) return true; return

判断浏览器是否支持某个css3属性的javascript方法

判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 * @author ydr.me * 2014年4月4日14:47:19 */   function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [],

IE6/7/8如何兼容CSS3属性

最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3 支持的主要CSS3属性: 1.border-radius圆角 CSS代码如下: .pie_radius{ width:250px;height:250px; background-color:#345