An explanation of CSS compatibility

Previous words

For front-end engineers, one problem they don’t want to face but have to face is compatibility. A few years ago, dealing with compatibility usually involved dealing with the compatibility of lower versions of IE browsers. In recent years, with the development of mobile terminals, engineers also need to pay attention to mobile phone compatibility. This article will introduce CSS compatibility in detail

Weird mode problem: If you omit the DTD declaration, Firefox will still parse the web page according to the standard mode, but the weird mode will be triggered in IE. In order to avoid weird patterns causing us unnecessary trouble, it is best to develop a good habit of writing DTD declarations.

2. IE6 double margin problem: Under IE6, if an element is floated and margin-left or margin-right is set at the same time, the margin value will be doubled. For example:

HTML:

Box model attribute

【 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

【Outer 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】

[Note] Only firefox supports the padding-box attribute value

(IE7-不支持)
box-sizing

Layout class attribute

[display]

　[ Note] IE7-the browser does not support the table class attribute value

(全兼容)
display

[Floating]

(全兼容)floatclear

[Positioning]

[Note] IE6-does not support fixed positioning: fixed

(全兼容)
position
left
right
top
bottom
z-index

[overflow related]

<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

【Multi-column layout】

(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

Text class Attribute

【Font font】

(全兼容)
font
font-family
font-size
font-style
font-variant
font-weight
line-height
@font-face

【First line indent text-indent】

(全兼容)
text-indent

【Alignment】

[Note] IE7-The percentage value of vertical-align in the browser does not support decimal line height

--align

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

[Interval]

(全兼容)
word-spacing
letter-spacing

【Case text-transform】

(全兼容)
text-transform

【Underline text-decoration】

(全兼容)
text-decoration

【White-space】

　[Note] IE7-browser does not support the two attribute values ​​​​of pre-line and pre-wrap

(全兼容)
white-space

[Line break]

　[ Note 1] W3C recommends using overflow-wrap to replace word-wrap

[Note2] Mobile terminals currently do not support the word-break attribute valuekeep-all　

--wrap

【Text direction】

-webkit--

【Text-overflow text-overflow】

(全兼容)
text-overflow

【Text-shadow text-shadow】

(IE9-不支持)
text-shadow

Modification class attribute

【Background】

(全兼容)
background
background-color
background-image
background-repeat
background-position

(IE8-不支持)
background-attachment
background-clip
background-size

【Foreground and Transparency】

(全兼容)
color

(IE8-不支持)
opacity

【Color Mode】

　[Note] IE7-does not support color:transparent, but does support background-color: transparent and border-color: transparent

-

【cursor】

　[Note]IE7-does not support extended styles

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

【Blending mode】

(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀)
mix-blend-mode
background-blend-mode
isolation

【Filter】

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

【Reflection box-reflect】

Only chrome and safari browsers support it, and the -webkit- prefix needs to be added

【will-change】

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

Other class attributes

[Table]

(全兼容)
border-collapse
table-layout
caption-side

(IE7-不支持)
border-spacing
empty-cells

[Page]

(全兼容)
page-break-after
page-break-before
page-break-inside

(IE7-不支持)
orphans

(IE及手机端不支持)
windows

[Selector]

(全兼容)
通配选择器   *元素选择器   div
类选择器     .box
ID选择器     #box
后代选择器   div a
分组选择器   h1,p

(IE6-不支持)
属性选择器    h1[class]
子元素选择器  ul > li
相邻兄弟选择器 div + p

(IE7-不支持)
通用兄弟选择器 div ~ p

[Pseudo-class]

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

[Pseudo-element]

(只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持)
:first-letter
:first-line

(IE7-不支持)
:before
:after

(IE8-不支持)
::selection

【Keyword】

(IE7-浏览器不支持)
inherit

(IE浏览器不支持)
initial

(IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持)
unset
all

(只有safari9.1+和ios9.3+支持)
revert

【calc】　

　[Note] android4.4-4.4.4 only supports addition and subtraction. IE9 does not support backround-position

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

【Unit】

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

(IE8-不支持)
rem

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

The above is the detailed content of An explanation of CSS compatibility. For more information, please follow other related articles on the PHP Chinese website!