html 兼容性设置,css属性兼容性详解

对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性。

盒模型属性

【宽高width/height】(全兼容)

width

height

(IE6-不支持)

min-width

max-width

min-height

max-height

【内边距padding】padding

【边框border】(全兼容)

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】(全兼容)

margin

(IE不支持，且需要添加webkit或moz前缀)

margin-start

margin-end

(只有chrome和safari支持，且需要添加webkit前缀)

-webkit-margin-before

-webkit-margin-after

【轮廓outline】(IE7-不支持)

outline

outline-width

outline-color

outline-style

(IE不支持)

outline-offset

【box-sizing】

[注意]只有firefox支持padding-box属性值(IE7-不支持)

box-sizing

布局类属性

【display】

[注意]IE7-浏览器不支持table类属性值(全兼容)

display

【浮动】(全兼容)

float

clear

【定位】

[注意]IE6-不支持固定定位position:fixed(全兼容)

position

left

right

top

bottom

z-index

【溢出相关】(全兼容)

overflow

overflow-x

overflow-y

clip

visibility

(IE不支持)

resize

【flex】(IE9-不支持)

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

align-self

flex-basis

flex-grow

flex-shrink

flex

order

【多列布局】(IE10+和chrome浏览器支持标准写法，firefox、safari浏览器及移动端android、IOS需要添加前缀)

column-width

column-count

column-gap

column-rule

column-span(firefox不支持该属性)

columns

(只有firefox支持带前缀的column-fill属性)

column-fill

【grid】(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

文本类属性

【字体font】(全兼容)

font

font-family

font-size

font-style

font-variant

font-weight

line-height

@font-face

【首行缩进text-indent】(全兼容)

text-indent

【对齐】

[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高(全兼容)

text-align

vertical-align

(safari浏览器、IOS、androis4.4-浏览器不支持)

text-align-last

【间隔】(全兼容)

word-spacing

letter-spacing

【大小写text-transform】(全兼容)

text-transform

【划线text-decoration】(全兼容)

text-decoration

【空白符white-space】

[注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值(全兼容)

white-space

【换行】

[注意1]W3C建议使用overflow-wrap替换word-wrap

[注意2]移动端目前基本都不支持word-break的属性值keep-all(全兼容)

word-wrap

word-break

(IE不支持)

overflow-wrap

【文本方向】(全兼容)

direction

unicode-bidi

(safari和移动端IOS和android需要添加-webkit-前缀；IE浏览器只支持自己的私有属性值)

writing-mode

【文本溢出text-overflow】(全兼容)

text-overflow

【文本阴影text-shadow】(IE9-不支持)

text-shadow

修饰类属性

【背景background】(全兼容)

background

background-color

background-image

background-repeat

background-position

(IE8-不支持)

background-attachment

background-clip

background-size

【前景和透明度】(全兼容)

color

(IE8-不支持)

opacity

【颜色模式】

[注意]IE7-不支持color:transparent，但支持background-color: transparent和border-color: transparent(全兼容)

命名颜色

16进制

RGB

(IE8-不支持)

currentColor

RGBA

HSL

HSLA

【光标cursor】

[注意]IE7-不支持拓展样式(全兼容)

cursor

【过渡transition】(IE9-不支持，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)

transition-property

transition-duration

transiton-timing-function

transition-delay

transition

【变形transform】(IE9-不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀)

transform

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

【渐变gradient】

IE9-不支持，safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变，且需要添加-webkit-；safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变，且需要添加-webkit-

【动画animation】(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

【混合模式】(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀)

mix-blend-mode

background-blend-mode

isolation

【滤镜filter】(IE浏览器及android4.3-浏览器不支持，android4.4+需要添加-webkit-前缀)

filter

【倒影box-reflect】

只有chrome和safari浏览器支持，且需要添加-webkit-前缀

【will-change】(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+)

will-change

其他类属性

【表格】(全兼容)

border-collapse

table-layout

caption-side

(IE7-不支持)

border-spacing

empty-cells

【分页】(全兼容)

page-break-after

page-break-before

page-break-inside

(IE7-不支持)

orphans

(IE及手机端不支持)

windows

【选择器】(全兼容)

通配选择器 *

元素选择器 div

类选择器 .box

ID选择器 #box

后代选择器 div a

分组选择器 h1,p

(IE6-不支持)

属性选择器 h1[class]

子元素选择器 ul > li

相邻兄弟选择器 div + p

(IE7-不支持)

通用兄弟选择器 div ~ p

【伪类】(全兼容)

:link

:visited

(IE6-不支持给以外的其他元素设置伪类)

: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

【伪元素】(只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持)

:first-letter

:first-line

(IE7-不支持)

:before

:after

(IE8-不支持)

::selection

【关键字】(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(IE8-、safari5.1-、ios5.1-、android4.3-不支持)

calc

【单位】(全兼容)

px

in

cm

mm

q

pt

pc

em

ex

ch

(IE8-不支持)

rem

(IE8-浏览器不支持，IOS7.1-不支持，android4.3-不支持，对于vmax所有IE浏览器都不支持)

vh

vw

vmin

vmax

本文来自HTML中文网css教程栏目。