CSS兼容性一

一、背景图片占满屏幕兼容性

1:css

div{backgrund-size:cover}

2:在标签上写

style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='scale')"

3:加上这个过滤之后会导致在ie上页面无法单击,在无法单击的样式上加上

.main{position: relative;}

4:如果你单击的地方是浮动的则让父元素清除浮动

.main{position: relative;zoom: 1;}
.main:after{content: "";display: block;clear: both;}

二、垂直居中

div#wrap {
     display: table;
     border: 1px solid #FF0099;
     background-color: #FFCCFF;
     width: 760px;
     height: 400px;
     *position: relative;
      overflow: hidden;
}
div#subwrap {
    vertical-align: middle;
     display: table-cell;
    *position: absolute;
    *top: 50%;
}
div#content {
    *position: relative;
    *top: -50%;
}

三、IE8浏览器去掉自带的白色边框

1:
2:css

body,html{border:0;}

四、去掉IOS系统默认样式

1:IOS系统的button,input,select,radio,checkbox等标签都有自带的样式去掉的话则:

-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);

2:如果加完以上css样式,发现没有默认的样式,可以加上以下样式即可:

-webkit-appearance:radio

五、display属性在IE8的兼容性问题

display: inline-block;
*display:inline;
*zoom:1;

你可能感兴趣的:(CSS兼容性一)