一、CSS hack
1、选择器Hack：IE6识别*header1.css ；IE7识别*+header1.css
2、Css Hack：
【IE都能识别*】，IE6识别"_width"和"-width"和"*width"，IE7只识别"*"，FireFox都不识别
Tip：*background IE识别，IE8,FireFox都不识别!important IE7和FireFox能识别，IE6不能识别
"_" IE6能识别，IE7、IE8、FireFox不能
【例：】
background-color:red\0; /* ie 8*/
background-color:blue\9\0; /* ie 9*/
#background-color:#dddd00; /* ie 7*/ 单独OK!
*background-color:#dddd00 !important; /* FF也有important时候搭配此句*/
_background-color:#CDCDCD; /* ie 6*/
#box{
}
3、Html Hack：
针对所有IE <!--[if IE]> <!-- 代码--> <![endif]-->
仅IE6可见 <!--[if IE 6]> <![endif]-->
针对IE6及以下版本: <!--[if It IE 6]> <![endif]-->
针对IE6以上版本： <!--[if gte IE 6]> <![endif]-->
书写顺序：识别能力强的浏览器的CSS写后面。
4、文字阴影兼容
text-shadow:1px 1px 2px #02316e;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=4, Direction=120); /*for ie6,7,8*/
5、图层阴影兼容
box-shadow: 0px 2px 2px #1a4f9b; /*opera或ie9*/
-webkit-box-shadow: 0px 2px 2px #1a4f9b; /*webkit*/
-moz-box-shadow: 0px 2px 2px #1a4f9b; /*firefox*/
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#1a4f9b, Strength=2, Direction=120); /*for ie6,7,8*/
behavior:url(css/PIE.htc); /*亲测好用*/
属性：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
详解：X-offset:偏移量，值为正值，阴影在右边，值为负值，阴影在左边；
Y-offset:偏移量，值为正值，阴影在底部，值为负值，阴影在顶部；
譬如投影：.box-shadow-6{
box-shadow: -10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
}
6、内阴影inset兼容
box-shadow: 0 8px 6px -6px #6a88aa inset; 【4位，比上面多了inset】
-moz-box-shadow: 0 8px 6px -6px #6a88aa inset;
-webkit-box-shadow: 0 8px 6px -6px #6a88aa inset;
透明度的:
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
右、底阴影；
box-shadow:-5px -5px 5px #999 inset; //左x,右y,距离（负值为反方向）
左、上阴影；
box-shadow:5px 5px 5px #999 inset;
7、文字描边兼容
-webkit-text-fill-color: white;/*文字的填充色*/
-webkit-text-stroke: 2px black;/*描边的像素，也就是粗细，这里指定是2像素的黑色边框*/
text-stroke: 4px #410301;
-webkit-text-stroke: 4px #410301; /*文字描边*/
filter:glow(color=#410301,strength=41);
8、圆角兼容
border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari 和 Chrome */
behavior:url(css/PIE.htc); /*亲测好用*/
border-radius:25px 10px 50px 0;//(顺时针顺序)
【问题】：IE6下大圆角中心区域没填充 ——》少_padding: 15px 100%;顺序也有关系
9、图层透明度
opacity:0.1;
-moz-opacity:0.1;
filter:alpha(opacity=10); /* 针对 IE8 以及更早的版本 */
【background: none 没有设置背景[图片] scroll 表示背景随浏览器下拉而滚动 transparent 背景颜色为透明 】
CSS background-color 属性：transparent背景颜色透明
10、图片背景渐变兼容
(1)不包含透明度
Filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
其中 gradientType=0代表纵向淅变，gradientType=1代表横向渐变;
(2)包含透明度
filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60);
其中各参数含义如下：
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
综述：
.tit-bg{
height:auto;
background: url(/jscias/img/tit-bg.jpg) repeat-x\9;【针对IE6-IE8完美方面：用图片!】
background: url(/jscias/img/tit-bg.jpg) repeat-x;
}
.one{
（“+”图标）
background: url(/jscias/img/tit-bg.jpg) no-repeat;
background: url(/jscias/img/add_default.png) 70px 8px no-repeat #d8eaff\9; /* IE6、IE7、IE8 */
background: 同上..no-repeat,linear-gradient(top, #e9f3ff, #d1e6ff);
background: 同上..no-repeat,-webkit-linear-gradient(top, #e9f3ff, #d1e6ff); /** Chrome Safari **/
background: 同上..no-repeat,-moz-linear-gradient(top, #e9f3ff, #d1e6ff); /** FireFox **/
background: 同上..no-repeat,-o-linear-gradient(top,#e9f3ff, #d1e6ff); /** Opear **/
background: 同上..no-repeat,-ms-linear-gradient(top,#e9f3ff, #d1e6ff); /*ie9,ie10*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9f3ff',endColorstr='#d1e6ff',grandientType=1);
/** IE7 **/
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#e9f3ff',endColorstr='#d1e6ff',grandientType=1);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/jscias/img/add_default.png'); /** Ie8 **/
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/jscias/img/add_default.png'); /**ie8**/
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/logo.gif", sizingMethod=scale); /*适应div的大小而不是平铺div */
11、border兼容
border-color: #66afe9;
-moz-border-color: #66afe9;
-webkit-border-color: #66afe9;
【问题】：IE8下th 边线间断——》 outline:1px solid #a1b8be\0;
position:relative\0; （保持与下面td线一齐）
left:0.5px\0; （保持与下面d线一齐）
12、透明度兼容
opacity:0.5;
filter:alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/
13、:hover兼容
body{ behavior:url("csshover.htc"); } 即可
14、HTML5 placeholder兼容
::-webkit-input-placeholder{ color; font-size:16px;}
::-moz-placeholder{ ...}
:-moz-placeholder{ ...}
:-ms-input-placeholder{ ...} /*IE*/
15、 background属性兼容
（1）background-size取固定值 / 百分比
background-size:90% 60%;
-moz-background-size:90% 60%;
-webkit-background-size:90% 60%;
-o-background-size:90% 60%;
（2）background取cover ——》充满，原图等比放大
-moz-background-size:cover; -webkit-; -o-;
（3）background取contain ——》
-moz-background-size:contain; -webkit-; -o-;
（4）background取auto ——》和初始图一样
16、IE a标签浮上去兼容：
.title a,.title a:hover,.title a:active{ 。。。}
17、 解决PNG显示问题：
首先下载JS文件：0.0.8a-min.js (压缩版) 0.0.8a.js (未压缩版本)
之后在页面中引用代码：
<!--[if IE 6]>
<script type="text/javascript" src="下载下来的JS路径"></script>
<script>
DD_belatedPNG.fix('CSS选择器, 应用类型');
</script>
<![endif]-->
引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和 background两种）。
- 如DD_belatedPNG.fix( '#box-one, img' ) 或者 DD_belatedPNG.fix( '.header, background' ) 等。
- 这些可以简写成 DD_belatedPNG.fix( '#box-one, .header, img,background' );
- 更多选择器的如 DD_belatedPNG.fix( '#box-one, .header,#footer,.box-two a:hover, img,background' );
18、 IE下表格DIV居中：
<body style="text-align:center">
<div class="container" style="width:960px; margin: 0 auto;">
</div>
【span,input,label标签不在一行显示： ——》浮动+display 】
最外面span{ float:left;display: inline-block; }
input{ 具体宽高 float:left;display: inline-block;}
二、CSS3 动画兼容
1、过渡兼容（transition）
transition:名称 总时间 曲线 何时开始
transition: background-color 1s linear, color 1s linear, width 1s linear;（多个属性）
-moz-transition: border-color 0.15s ease-in-out 0s;
-webkit-transition: border-color 0.15s ease-in-out 0s;
-o-transition: border-color 0.15s ease-in-out 0s;
-ms-transition: border-color 0.15s ease-in-out 0s;
（IE6尚未木有，除非js）
2、旋转兼容（transform）
-moz-transform: rotate(180deg); /* FF3.5+ */
-o-transform: rotate(180deg); /* Opera 10.5 */
-webkit-transform: rotate(180deg); /* Saf3.1+, Chrome */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);
3、动画兼容(Animations)
.test{
-webkit-animation: ;
-moz-animation: ;
-o-animation: ;
animation: ;
}
扫一扫
5228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
