在CSS中由于有些css属性在不同的浏览器中可能会失效,因此需要CSS对各浏览器做兼容,那么如何做CSS兼容呢?需要先了解这几个浏览器前缀。
-webkit :表示对safari苹果浏览器与chrome谷歌浏览器的支持 -ms :表示对IE浏览器的支持 -o :表示对opera浏览器的支持 -moz :表示对firefox火狐浏览器的支持 |
那么如果一个css属性想要兼容各个浏览器,该如何做呢?例如以下的transform:translate属性就需要做浏览器兼容,否则就会发现在有些浏览器出现css代码失效的问题,因此可以这样用,代码如下:
/*html代码*/ <div class="mydiv"><div> /*CSS代码*/ .mydiv{ width:100px; height:100px; background-color:blue; transform:translate(200px,100px); -webkit-transform:rotate(180deg); -ms-transform:translate(200px,100px); -o-transform:translate(200px,100px); -moz-transform:translate(200px,100px); }
而且CSS浏览器兼容有时候必须要做,不然会给用户一些不好的体验。