css不同浏览器兼容性处理

最新推荐文章于 2026-04-20 21:35:02 发布

原创最新推荐文章于 2026-04-20 21:35:02 发布 · 2.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

浏览器兼容性专栏收录该内容

2 篇文章

订阅专栏

本文介绍了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 也不支持。