CSS 兼容
对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。几年前，处理兼容性，一般地就是处理 IE 低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。
[1] 盒模型属性
- 宽高 width/height
|
1 2 3 4 5 6 7 8 9 |
(全兼容) width height (IE6-不支持) min-width max-width min-height max-height |
- 内边距 padding
|
1 |
padding |
- 边框 border
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
(全兼容) border border-width border-color border-style (IE8-不支持) border-radius (IE10-不支持) border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat (只有firefox支持，需要添加-moz-前缀) border-colors |
- 外边距 margin
|
1 2 3 4 5 6 7 8 9 10 |
(全兼容) margin (IE不支持，且需要添加webkit或moz前缀) margin-start margin-end (只有chrome和safari支持，且需要添加webkit前缀) -webkit-margin-before -webkit-margin-after |
- 轮廓 outline
|
1 2 3 4 5 6 7 8 |
(IE7-不支持) outline outline-width outline-color outline-style (IE不支持) outline-offset |
- box-sizing // 只有 firefox 支持 padding-box 属性值
|
1 2 |
(IE7-不支持) box-sizing |
[2] 布局类属性
- display // IE7- 浏览器不支持 table 类属性值
|
1 2 |
(全兼容) display |
- 浮动
|
1 2 3 |
(全兼容) float clear |
- 定位 // IE6-不支持固定定位 position:fixed
|
1 2 3 4 5 6 7 |
(全兼容) position left right top bottom z-index |
- 溢出相关
|
1 2 3 4 5 6 7 8 9 |
(全兼容) overflow overflow-x overflow-y clip visibility (IE不支持) resize |
- flex
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(IE9-不支持) flex-direction flex-wrap flex-flow justify-content align-items align-content align-self flex-basis flex-grow flex-shrink flex order |
- 多列布局
|
1 2 3 4 5 6 7 8 9 10 |
(IE10+和chrome浏览器支持标准写法，firefox、safari浏览器及移动端android、IOS需要添加前缀) column-width column-count column-gap column-rule column-span(firefox不支持该属性) columns (只有firefox支持带前缀的column-fill属性) column-fill |
- grid
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(IE9-不支持，IE10+需要添加-ms-前缀，android4.4.4-不支持，IOS10.2-不支持) grid-template-rows grid-template-columns grid-template-areas grid-column-gap grid-row-gap grid-gap grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-column grid-area grid-auto-flow grid-auto-rows grid-auto-columns justify-items justify-self align-items align-self |
[3] 文本类属性
- 字体font
|
1 2 3 4 5 6 7 8 9 |
(全兼容) font font-family font-size font-style font-variant font-weight line-height @font-face |
- 首行缩进 text-indent
|
1 2 |
(全兼容) text-indent |
- 对齐 // IE7- 浏览器中 vertical-align 的百分比值不支持小数行高
|
1 2 3 4 5 6 |
(全兼容) text-align vertical-align (safari浏览器、IOS、androis4.4-浏览器不支持) text-align-last |
- 间隔
|
1 2 3 |
(全兼容) word-spacing letter-spacing |
- 大小写 text-transform
|
1 2 |
(全兼容) text-transform |
- 划线 text-decoration
|
1 2 |
(全兼容) text-decoration |
- 空白符 white-space // IE7- 浏览器不支持 pre-line 和 pre-wrap 这两个属性值
|
1 2 |
(全兼容) white-space |
- 换行
[注意1] W3C 建议使用 overflow-wrap 替换 word-wrap
[注意2] 移动端目前基本都不支持 word-break 的属性值 keep-all
|
1 2 3 4 5 6 |
(全兼容) word-wrap word-break (IE不支持) overflow-wrap |
- 文本方向
|
1 2 3 4 5 6 |
(全兼容) direction unicode-bidi (safari和移动端IOS和android需要添加-webkit-前缀；IE浏览器只支持自己的私有属性值) writing-mode |
- 文本溢出 text-overflow
|
1 2 |
(全兼容) text-overflow |
- 文本阴影 text-shadow
|
1 2 |
(IE9-不支持) text-shadow |
[4] 修饰类属性
- 背景 background
|
1 2 3 4 5 6 7 8 9 10 11 |
(全兼容) background background-color background-image background-repeat background-position (IE8-不支持) background-attachment background-clip background-size |
- 前景和透明度
|
1 2 3 4 5 |
(全兼容) color (IE8-不支持) opacity |
- 颜色模式
[注意] IE7- 不支持 color:transparent，但支持 background-color: transparent 和 border-color: transparent
|
1 2 3 4 5 6 7 8 9 10 |
(全兼容) 命名颜色 16进制 RGB (IE8-不支持) currentColor RGBA HSL HSLA |
- 光标 cursor // IE7- 不支持拓展样式
|
1 2 |
(全兼容) cursor |
- 过渡 transition
|
1 2 3 4 5 6 |
(IE9-不支持，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀) transition-property transition-duration transiton-timing-function transition-delay transition |
- 变形 transform
|
1 2 3 4 5 6 7 |
(IE9-不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀) transform transform-origin transform-style perspective perspective-origin backface-visibility |
- 渐变 gradient
|
1 |
IE9-不支持，safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit- |
- 动画 animation
|
1 2 3 4 5 6 7 8 9 10 |
(IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀) animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode |
- 混合模式
|
1 2 3 4 |
(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀) mix-blend-mode background-blend-mode isolation |
- 滤镜 filter
|
1 2 |
(IE浏览器及android4.3-浏览器不支持，android4.4+需要添加-webkit-前缀) filter |
- 倒影 box-reflect
只有 chrome 和 safar i浏览器支持，且需要添加 -webkit- 前缀
- will-change
|
1 2 |
(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+) will-change |
[5] 其他类属性
- 表格
|
1 2 3 4 5 6 7 8 |
(全兼容) border-collapse table-layout caption-side (IE7-不支持) border-spacing empty-cells |
- 分页
|
1 2 3 4 5 6 7 8 9 10 |
(全兼容) page-break-after page-break-before page-break-inside (IE7-不支持) orphans (IE及手机端不支持) windows |
- 选择器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
(全兼容) 通配选择器 * 元素选择器 div 类选择器 .box ID选择器 #box 后代选择器 div a 分组选择器 h1,p (IE6-不支持) 属性选择器 h1[class] 子元素选择器 ul > li 相邻兄弟选择器 div + p (IE7-不支持) 通用兄弟选择器 div ~ p |
- 伪类
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
(全兼容) :link :visited (IE6-不支持给<a>以外的其他元素设置伪类) :hover :active (IE7-不支持) :focus :lang() (IE8-不支持) :target :enabled :disabled :checked :nth-child(n) :nth-last-child(n) :first-child :last-child :only-child :nth-of-type(n) :nth-last-of-type(n) :first-of-type :last-of-type :only-of-type :root :not :empty :target |
- 伪元素
|
1 2 3 4 5 6 7 8 9 10 |
(只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持) :first-letter :first-line (IE7-不支持) :before :after (IE8-不支持) ::selection |
- 关键字
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(IE7-浏览器不支持) inherit (IE浏览器不支持) initial (IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持) unset all (只有safari9.1+和ios9.3+支持) revert |
- calc
[注意] android4.4-4.4.4 只支持加法和减法。IE9 不支持用于 backround-position
|
1 2 |
(IE8-、safari5.1-、ios5.1-、android4.3-不支持) calc |
- 单位
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(全兼容) px in cm mm q pt pc em ex ch (IE8-不支持) rem (IE8-浏览器不支持，IOS7.1-不支持，android4.3-不支持，对于vmax所有IE浏览器都不支持) vh vw vmin vmax |