常见的IE兼容性代码大全
1.制作全屏背景技巧
我们只要把需要做为全屏背景的那张图片放在HTML标签中：
| html{/* 需要全屏的背景图片 */background:url(‘background.jpg’) no-repeat center center;/* 确保html元素总是占用全部浏览器窗口的高度 */min-height:100%;/* 实现的关键 */
background-size:cover; } body{ /* 在移动端更好的工作 */ min-height:100%; } |
2.最小高度兼容代码，min-height
| selector {min-height:500px;height:auto !important;height:500px;} |
还有一条专门针对ie的，不建议使用
| div {height: expression( this.scrollHeight < 501 ? “500px” : “auto” );} |
3.清除浮动
| /* new clearfix */.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ” “;
clear: both; height: 0; } * html .clearfix???????????? { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ |
| //最近版\r\n.clearfix:before, .clearfix:after {content:””;display:table;}.clearfix:after{
clear:both; overflow:hidden; } .clearfix{ *zoom:1; } |
4.CSS透明兼容，alpha兼容
以前的兼容
| .transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/-moz-opacity:0.5;????/* old mozilla browser like netscape??*/-khtml-opacity: 0.5;????/* for really really old safari */opacity: 0.5;????/* css standard, currently it works in most modern browsers like firefox,??*/
} |
现在的兼容
| .transparent_class {-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* ie8??*/filter:alpha(opacity=50);????/* ie5-7??*/opacity: 0.5;????/* css standard, currently it works in most modern browsers??*/} |
5.rgba兼容
| .rgba {background: rgb(0,0,0); /*The Fallback color*/background: rgba(0, 0, 0,0.5);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */\r\n} |
注：ie滤镜中的颜色值前两位表示透明度，下面说明这个透明值如何计算：
现在我需要两个透明度，分别为0.25和0.5，那么第一步先得到乘以256的数值
256 × 0.25 = 64，
256 × 0.50 = 128，
然后我们通过这个地址的计算公式convert to hexadecimal 得到值为: 40和 80
6.标签pre的css代码，防止代码pre中代码过长等问题
| pre {white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */
} |
7.ie hack招数集
| #box{\r\ncolor:red; /* 所有浏览器都支持 */color:red !important;/* 除IE6外 */_color:red; /* IE6支持 */*color:red; /* IE6、IE7支持 */+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */ color:red\9; /* IE6、IE7、IE8、IE9支持 */ color:red\0; /* IE8、IE9支持 */ color:red\9\0;/*IE9支持*/ } |
8.兼容浏览器的inline-block
| .inlineblock{display:inline-block;*display:inline;*zoom:1;} |
9.css省略号实现
Firefox7.0开始兼容text-overflow:ellipsis;这样的话，以后的省略号就可以做到浏览器兼容了，代码片段为：
| width:200px;/*设置宽度*/white-space:nowrap;/*设置不折行*/text-overflow:ellipsis;/*这就是省略号喽*/-o-text-overflow:ellipsis;/*兼容opera*/overflow: hidden;/*设置超过的隐藏*/ |
10.纯CSS三角效果代码
| <style>.arrow-up {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;
border-bottom: 5px solid black; } .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; }
.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; } </style> |