现在的位置: 首页网站设计>正文
常见的IE兼容性代码大全
2012年07月25日 网站设计 暂无评论

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>

 

给我留言

留言无头像?