您现在的位置是:网站首页> 编程资料编程资料
对常见的css属性进行浏览器兼容性总结(推荐)CSS浏览器兼容性常见问题总结大全(推荐)详解CSS3浏览器兼容浅谈各种浏览器下的CSS Hack兼容性写法CSS3中的Opacity多浏览器透明度兼容性问题CSS浏览器兼容性Hack大全CSS对浏览器的兼容性性处理(IE7,6与Fireofx)CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器CSS hack大全之特殊符号的应用解决浏览器兼容性问题CSS 多浏览器兼容性问题及解决方案
2021-09-04
951人已围观
简介 这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
为什么要对css属性进行浏览器兼容性总结呢?用的时候,直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗?

css3.jpeg
其实,在实际的开发过程中,我们对常见的css属性兼容情况了然于胸,才能极大的提高我们的开发效率,写出可以进行优雅降级的代码。这里并不是说一定要所有的css属性兼容情况都要背下来,对于使用率较低的,我们直接使用Can I Use 进行检索。
边框:
- border-radius: 最低兼容至 IE9,其它浏览器兼容情况优良。
- box-shadow: 最低兼容至IE9, 其它浏览器兼容情况优良。
背景:
background-size: 最低兼容至IE9, 其它浏览器兼容情况优良。
字体:
@font-face: IE9及以上版本的IE浏览器,支持引入任何格式的字体文件,而在IE9之前的浏览器,只支持引入EOT格式的字体文件。 其它浏览器兼容情况优良。
2D转换:
transform: 最低兼容至IE9(需要添加-ms-前缀),其它浏览器兼容情况优良。在transform属性前加入浏览器内核前缀是很好的实践。不建议在svg元素上使用transform属性,最新版本的IE并不支持这一使用方式。
3D转换:
IE10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换,它只支持2D 转换。
过渡:
transition:最低兼容至IE10,其它浏览器兼容情况优良。Safari浏览器需要前缀-webkit-,其它大部分浏览器对此并未有前缀要求,因此除了特殊情况,可以不添加其它浏览器的前缀。
动画:
animation:兼容情况与transition属性大致相同。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- CSS清除浮动方法大全(小结)CSS实现元素浮动和清除浮动的方法html/css中float浮动的用法实例详解轻松搞懂CSS浮动与清除浮动图文详解css 如何清除浮动的示例代码详解css使既有浮动又有左右margin的多个元素两端对其css浮动 float属性详解
- CSS中的导航栏和下拉菜单的实现CSS 带搜索导航栏的示例代码html+css+js实现导航栏滚动渐变效果css锚点定位被顶部固定导航栏遮住的解决方案不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS导航条菜单之带小三角形的实现代码css实现导航切换的实例代码CSS设置列表样式和创建导航菜单实现代码纯CSS + 媒体查询实现网页导航效果CSS3 二级导航菜单的制作的示例
- HTML+CSS实现下拉菜单的实现js+css3制作下拉城市菜单多选代码CSS中的导航栏和下拉菜单的实现纯CSS实现的大型下拉菜单的示例代码纯CSS实现下拉菜单的示例代码纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码纯CSS+HTML大型下拉菜单特效HTML+CSS实现简单下拉菜单效果利用纯css做一个下拉菜单功能的示例代码
- css遮罩全屏居中对齐的实现方式css3实现一个div设置多张背景图片及background-image属性实例演示CSS3实现的全屏背景图片缩小渐变切换效果源码CSS的background属性及CSS3的背景图片设置总结jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码jquery+css3实现的网页背景图片固定内容切换特效源码CSS实现镂空遮罩效果CSS3 mask 遮罩的具体使用方法css3给背景图片加颜色遮罩的方法
- 通过css使用background-color为背景图添加遮罩效果的两种方法CSS实现同一行的图片和文字垂直居中对齐的方法CSS解决文字与图片不能水平居中对齐的问题垂直居中对齐的CSS示例代码css中使input输入框与img(图片)在同一行居中对齐SCSS移动端页面遮罩层效果的实现及常见问题解决css遮罩全屏居中对齐的实现方式
- CSS3实现文本垂直排列的方法深入理解CSS行高line-height与文本垂直居中的原理CSS文本和div垂直居中方法总结 通过CSS显示垂直文本以垂直方式显示文本元素通过css控制HTML文本框中的文字垂直居中CSS设置多行文本垂直居中的方法用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的
- css 评分效果的星星示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- 深入浅析CSS 选择器分组css选择器中有小数点的标签获取方法CSS3 :default伪类选择器使用简介CSS选择器的新用法(推荐)CSS选择器实现字段解析CSS中选择器的权重值的计算详解CSS3选择器:nth-child和:nth-of-type之间的差异css3之UI元素状态伪类选择器实例演示CSS 属性选择器_动力节点Java学院整理css3类选择器之结合元素选择器和多类选择器用法详解css常用选择器
- CSS 设置滚动条样式的实例代码纯css修改浏览器scrollbar滚动条样式示例详解css3自定义滚动条样式写法CSS3自定义滚动条样式的示例代码纯CSS改变webkit内核浏览器的滚动条样式CSS样式设置div滚动条示例代码详解如何自定义CSS滚动条的样式
- CSS中有些属性的前面会加上“*”或“_”所代表的意思关于CSS中 星号*的使用介绍谨慎使用CSS中的星号(*)通配符
