Eine Erklärung der CSS-Kompatibilität

Vorherige Wörter

Für Front-End-Ingenieure ist die Kompatibilität ein Problem, mit dem sie sich nicht auseinandersetzen wollen, sondern dem sie sich stellen müssen. Vor einigen Jahren umfasste der Umgang mit Kompatibilität normalerweise die Auseinandersetzung mit der Kompatibilität niedrigerer Versionen von IE-Browsern. Mit der Entwicklung mobiler Endgeräte müssen Ingenieure in den letzten Jahren auch auf die Kompatibilität von Mobiltelefonen achten. In diesem Artikel wird die CSS-Kompatibilität ausführlich vorgestellt.

Problem mit dem seltsamen Modus: Wenn die DTD-Deklaration weggelassen wird, analysiert Firefox die Webseite weiterhin gemäß dem Standardmodus, der seltsame Modus jedoch im IE ausgelöst. Um zu vermeiden, dass seltsame Muster uns unnötige Probleme bereiten, ist es am besten, eine gute Angewohnheit beim Schreiben von DTD-Deklarationen zu entwickeln.

2. IE6-Problem mit doppeltem Rand: Wenn unter IE6 ein Element schwebend ist und gleichzeitig margin-left oder margin-right festgelegt ist, wird der Margin-Wert verdoppelt. Zum Beispiel:

HTML:

Box-Modellattribut

【 Breite/Höhe】

(全兼容)
width
height

(IE6-不支持)
min-width
max-width
min-height
max-height

【Polsterung】

padding

【Rand】

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

[Rand]

(全兼容)
margin

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

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

[Umriss]

(IE7-不支持)
outline
outline-width
outline-color
outline-style

(IE不支持)
outline-offset

【Box-Größe】

　[Hinweis] Nur Firefox unterstützt den Attributwert „padding-box“

(IE7-不支持)
box-sizing

Layoutklassenattribut

[display]

　[Hinweis] IE7-Browser unterstützt keinen Tabellenklassenattributwert

(全兼容)
display

[floating]

(全兼容)floatclear

[ Positionierung]

[Hinweis] IE6 unterstützt keine feste Positionierung: behoben

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

[Überlaufbezogen]

<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

【Mehrspaltiges Layout】

(IE10+和chrome浏览器支持标准写法，firefox、safari浏览器及移动端android、IOS需要添加前缀)
column-width
column-count
column-gap
column-rule
column-span(firefox不支持该属性)
columns

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

【Gitter】

(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

Textattribut

【Schriftart】

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

【Texteinzug der ersten Zeile 】

(全兼容)
text-indent

【Ausrichtung】

　[Hinweis] Der Prozentwert der vertikalen Ausrichtung im IE7-Browser ist nicht derselbe. Unterstützt Dezimalzeilenhöhe

--align

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

[Abstand]

(全兼容)
word-spacing
letter-spacing

[Groß- und Kleinbuchstaben-Texttransformation]

(全兼容)
text-transform

【underline text-decoration】

(全兼容)
text-decoration

【white-space】

　[Hinweis] IE7-Browse Der Prozessor unterstützt die beiden Attributwerte nicht ​​​​von pre-line und pre-wrap

(全兼容)
white-space

[Zeilenumbruch]

[Hinweis 1] W3C empfiehlt die Verwendung von Overflow-Wrap anstelle von Word- wrap

[Hinweis2] Mobile Endgeräte unterstützen derzeit nicht den Attributwert von word-breakkeep-all　

--wrap

[Textrichtung]

-webkit--

[Textüberlauf]

(全兼容)
text-overflow

【 text-shadow】

(IE9-不支持)
text-shadow

Änderungsklassenattribut

【Hintergrund】

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

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

【Vordergrund und Transparenz】

(全兼容)
color

(IE8-不支持)
opacity

【Farbmodus】

　[Hinweis] IE7 unterstützt nicht color:transparent, unterstützt aber Hintergrundfarbe: transparent und Rahmenfarbe: transparent

-

[Cursor]

[Hinweis] IE7 – unterstützt keine erweiterten Stile

(全兼容)
cursor

【Übergang】

(IE9-不支持，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀)
transition-property
transition-duration
transiton-timing-function
transition-delay
transition

【Transformieren】

(IE9-不支持，safari3.-、android2.-.、IOS3.----

【Verlauf】

　　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

【Mischmodus】

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

【Filter】

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

【Reflection box-reflect】

Nur ​​Chrome- und Safari-Browser unterstützen es und das Präfix -webkit- muss hinzugefügt werden

【wird sich ändern】

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

Andere Klassenattribute

[Tabelle]

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

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

[Seite ]

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

(IE7-不支持)
orphans

(IE及手机端不支持)
windows

[Selektor]

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

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

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

[Pseudoklasse]

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

[Pseudoelement]

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

(IE7-不支持)
:before
:after

(IE8-不支持)
::selection

[Schlüsselwort]

(IE7-浏览器不支持)
inherit

(IE浏览器不支持)
initial

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

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

【calc】

[Hinweis] Android4.4-4.4.4 unterstützt nur Addition und Subtraktion. IE9 unterstützt keine Hintergrundposition

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

[Einheit]

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

(IE8-不支持)
rem

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

Das obige ist der detaillierte Inhalt vonEine Erklärung der CSS-Kompatibilität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!