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:
【 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
[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
【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
【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
[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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
