常用模式片段之CSS兼容性

续前面的CSS布局篇,这里整理一些需求下的浏览器兼容性写法。

色彩滤镜

opacity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;

灰白滤镜

1
2
3
4
5
6
7
8
9
10
11
.grayscale(){
filter: gray; /* For IE 6 - 9 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%); /* For Standard */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

居中问题

table-cell 垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.table {
height: 300px;/*高度值不能少*/
width: 300px;/*宽度值不能少*/
display: table;
position: relative;
float:left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
}

行排列

inline-block IE6/7 hack

1
2
*display: inline;
*zoom: 1;

未完待续

请持续关注~