前面的話
對於前端工程師來說，不想面對又不得不面對的一個問題就是相容性。在幾年之前，處理相容性，一般地就是處理IE低版本瀏覽器的兼容性。而近幾年，隨著行動端的發展，工程師也需要注意手機相容性了。本文將詳細介紹CSS相容性
怪異模式問題：遺漏DTD聲明，Firefox仍會依照標準模式解析網頁，但在IE中會觸發怪異模式。為避免怪異模式帶給我們不必要的麻煩，最好養成書寫DTD聲明的好習慣。
2.IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。例如：
HTML：
盒模型屬性
#【寬高width/height】
(全兼容)
width
height
(IE6-不支持)
min-width
max-width
min-height
max-height
登入後複製
【內邊距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類屬性值
【浮動】
##【定位】
[注意]IE6-不支援固定定位position:fixed
(全兼容)
position
left
right
top
bottom
z-index
登入後複製
【溢出相關】
<span style="color: #000000;">(全兼容)
overflow<br>overflow-x<br>overflow-y<br>clip<br>visibility<br><br>(IE不支持)<br>resize</span>
登入後複製
【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】
【對齊】
[注意]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這兩個屬性值
【換行】
# [注意1]W3C建議使用overflow-wrap替換word-wrap
[注意2]行動端目前基本上都不支援word-break的屬性值keep-all
【文字方向】
【文字溢位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-不支援拓展樣式
【過渡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
登入後複製
##
#
以上是CSS相容性的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
