常用模式片段之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;

未完待续

请持续关注~