本系列HTML+CSS入门将给大家系统的讲解CSS的常用模式，看完这系列会让你对CSS常用模式有更加清晰的理解和运用。

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

色彩滤镜

opacity

/* 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;

灰白滤镜

.grayscale(){

    filter: gray; /* For IE 6 - 9 */

    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'//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 垂直居中

.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

*display: inline;

*zoom: 1;

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！