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

【浮動】

(全相容)floatclear

【定位】

　　[注意]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的百分比值不支援小數行高

--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　

--wrap

【文字方向】

-webkit--

【文字溢位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

-

【游標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.-、android2.-.、IOS3.----

【漸變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-不支援給<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

【偽元素】

(只有當選擇器部分和左大括號之間有空格時，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

【單位】

(全相容)
pxincm
mm
q
pt
pc
em
ex
ch

(IE8-不支援)
rem

(IE8-瀏覽器不支援，IOS7.1-不支援，android4.3-不支援，對於vmax所有IE瀏覽器都不支援)
vh
vw
vmin
vmax