css不同浏览器兼容性处理

1,设置文字不可选:

{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}

2.去除select默认的样式

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

3,input提示文字颜色修改

input.form-control::-webkit-input-placeholder {
    color: #f00;
}   
input.form-control:-ms-input-placeholder {
    color: #f00;
}

4,rgba 兼容 和 opacity 兼容

eg:background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。
19–> 0.1
33–>0.2
4C–>0.3
66–>0.4
7F–>0.5
99–>0.6
B2–>0.7
C8–>0.8
E5–>0.9
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。

Eg:opacity:0.5;
    filter:alpha(opacity=50); 
    -moz-opacity:0.50; 

5,背景图片适应不同屏幕

background-size: cover;//把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
background-position: center center//居中
浏览器兼容:
IE 和遨游不支持;
Firefox 添加私有属性 -moz-background-size 支持;
Safari 和 Chrome 添加私有属性 -webkit-background-size 支持;
Opera 不支持 background-size 属性,添加其私有属性 -o-background-size 也不支持。

猜你喜欢

转载自blog.csdn.net/chenzlyan/article/details/80567167