在css样式编辑中,我们常常会遇到一些浏览器对某些属性支持度不同的问题,这时候就需要使用属性兼容性写法来应对这种情况,以下是一些常见的属性兼容性写法:/* 首先是针对不同浏览器的前缀写法 */ /*
在css样式编辑中,我们常常会遇到一些浏览器对某些属性支持度不同的问题,这时候就需要使用属性兼容性写法来应对这种情况,以下是一些常见的属性兼容性写法:
/* 首先是针对不同浏览器的前缀写法 */ /* Safari 和 Chrome */ .test { -webkit-border-radius: 5px; } /* Firefox */ .test { -moz-border-radius: 5px; } /* IE10+ */ .test { -ms-border-radius: 5px; } /* Opera */ .test { -o-border-radius: 5px; } /* IE6-9 */ .test { border-radius: 5px; /* 注意,这行代码应该放在上面四行代码之后 */ } /* 接下来是一些特殊情况的兼容性写法 */ /* IE6-7不支持透明度,可以用filter来实现,但要注意ie8及以上也支持filter,所以此时应该用下面的兼容性写法 */ .test { background-color: rgba(255, 255, 255, 0.5); /* 标准透明度写法 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF); /* IE6-9兼容写法 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF, endColorstr=#80FFFFFF)"; /* IE8+兼容写法 */ } /* 如果要使用CSS3的transform属性,有些浏览器需要加上-webkit-前缀 */ .test { transform: rotate(45deg); /* 标准写法 */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ } /* box-shadow属性同理 */ .test { box-shadow: 2px 2px 2px #888; /* 标准写法 */ -webkit-box-shadow: 2px 2px 2px #888; /* Safari 和 Chrome */ -moz-box-shadow: 2px 2px 2px #888; /* Firefox */ -o-box-shadow: 2px 2px 2px #888; /* Opera */ }
以上是一些常见的属性兼容性写法,总之,写好兼容性代码可以让我们的网页更加完美,为用户带来更好的体验。
粉丝
0
关注
0
收藏
0