CSS相容性詳解

標籤：lang   text   元素選取器   寬高   page   空白   script   cal   disable   

前面的話

　　對於前端工程師來說，不想面對又不得不面對的一個問題就是相容性。在幾年之前，處理相容性，一般地就是處理IE低版本瀏覽器的相容性。而近幾年，隨著移動端的發展，工程師也需要注意手機相容性了。本文將詳細介紹CSS相容性

  

盒模型屬性

【寬高width/height】

(全相容)widthheight(IE6-不支援)min-widthmax-widthmin-heightmax-height

【內邊距padding】

padding

【邊框border】

(全相容)borderborder-widthborder-colorborder-style(IE8-不支援)border-radius(IE10-不支援)border-imageborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat(只有firefox支援，需要添加-moz-首碼)border-colors

【外邊距margin】

(全相容)margin(IE不支援，且需要添加webkit或moz首碼)margin-startmargin-end(只有chrome和safari支援，且需要添加webkit首碼)-webkit-margin-before-webkit-margin-after

【輪廓outline】

(IE7-不支援)outlineoutline-widthoutline-coloroutline-style(IE不支援)outline-offset

【box-sizing】

　　[注意]只有firefox支援padding-box屬性值

(IE7-不支援)box-sizing

 

布局類屬性

【display】

　　[注意]IE7-瀏覽器不支援table類屬性值

(全相容)
display

【浮動】

(全相容)floatclear

【定位】

　　[注意]IE6-不支援固定定位position:fixed

(全相容)positionleftrighttopbottomz-index

【溢出相關】

(全相容)overflow
overflow-x
overflow-y
clip
visibility

(IE不支援)
resize

【flex】

(IE9-不支援)flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentalign-selfflex-basisflex-growflex-shrinkflexorder

【多欄版面配置】

(IE10+和chrome瀏覽器支援標準寫法，firefox、safari瀏覽器及移動端android、IOS需要添加首碼)column-widthcolumn-countcolumn-gapcolumn-rulecolumn-span(firefox不支援該屬性)columns(只有firefox支援帶首碼的column-fill屬性)column-fill

【grid】

(IE9-不支援，IE10+需要添加-ms-首碼，android4.4.4-不支援，IOS10.2-不支援)grid-template-rowsgrid-template-columnsgrid-template-areasgrid-column-gapgrid-row-gapgrid-gapgrid-row-startgrid-row-endgrid-rowgrid-column-startgrid-column-endgrid-columngrid-areagrid-auto-flowgrid-auto-rowsgrid-auto-columnsjustify-itemsjustify-selfalign-itemsalign-self

 

文本類屬性

【字型font】

(全相容)fontfont-familyfont-sizefont-stylefont-variantfont-weightline-height@font-face

【首行縮排text-indent】

(全相容)text-indent

【對齊】

　　[注意]IE7-瀏覽器中vertical-align的百分比值不支援小數行高

(全相容)text-alignvertical-align

(safari瀏覽器、IOS、androis4.4-瀏覽器不支援)
text-align-last

【間隔】

(全相容)word-spacingletter-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

【文本方向】

(全相容)directionunicode-bidi
(safari和移動端IOS和android需要添加-webkit-首碼；IE瀏覽器只支援自己的私人屬性值)writing-mode

【文本溢出text-overflow】

(全相容)text-overflow

【文本陰影text-shadow】

(IE9-不支援)text-shadow

 

修飾類屬性

【背景background】

(全相容)backgroundbackground-colorbackground-imagebackground-repeatbackground-position(IE8-不支援)background-attachmentbackground-clipbackground-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-propertytransition-durationtransiton-timing-functiontransition-delaytransition

【變形transform】

(IE9-不支援，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加首碼)transformtransform-origin
transform-styleperspectiveperspective-originbackface-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-首碼)animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode

【混合模式】

(IE瀏覽器、android4.4-不支援，safari和IOS需要添加-webkit-首碼)mix-blend-modebackground-blend-modeisolation

【濾鏡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-collapsetable-layoutcaption-side(IE7-不支援)border-spacingempty-cells

【分頁】

(全相容)page-break-afterpage-break-beforepage-break-inside(IE7-不支援)orphans(IE及手機端不支援)windows

【選取器】

(全相容)通配選取器   *元素選取器   div類別選取器     .boxID選取器     #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-不支援)unsetall(只有safari9.1+和ios9.3+支援)revert

【calc】　

　　[注意]android4.4-4.4.4隻支援加法和減法。IE9不支援用於backround-position

(IE8-、safari5.1-、ios5.1-、android4.3-不支援)calc

【單位】

(全相容)pxincmmmqptpcemexch(IE8-不支援)rem(IE8-瀏覽器不支援，IOS7.1-不支援，android4.3-不支援，對於vmax所有IE瀏覽器都不支援)vhvwvminvmax

 

CSS相容性詳解