Pour les ingénieurs front-end, un problème auquel ils ne veulent pas être confrontés mais qu'ils doivent affronter est la compatibilité. Il y a quelques années, gérer la compatibilité impliquait généralement de gérer la compatibilité des versions inférieures des navigateurs IE. Ces dernières années, avec le développement des terminaux mobiles, les ingénieurs doivent également prêter attention à la compatibilité des téléphones mobiles. Cet article présentera en détail la compatibilité CSS
Problème de mode étrange : si la déclaration DTD est omise, Firefox analysera toujours la page Web selon le mode standard, mais le mode étrange sera déclenché dans IE. Afin d'éviter que des modèles étranges ne nous causent des problèmes inutiles, il est préférable de développer une bonne habitude d'écrire des déclarations DTD.
2. Problème de double marge dans IE6 : sous IE6, si un élément flotte et que margin-left ou margin-right est défini en même temps, la valeur de la marge sera doublée. Par exemple :
HTML :
【Largeur/hauteur】
(全兼容) width height (IE6-不支持) min-width max-width min-height max-height
【Rembourrage】
padding
【Bordure】
(全兼容) 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
【Marge extérieure】
(全兼容) margin (IE不支持，且需要添加webkit或moz前缀) margin-start margin-end (只有chrome和safari支持，且需要添加webkit前缀)-webkit-margin-before-webkit-margin-after
【contour】
(IE7-不支持) outline outline-width outline-color outline-style (IE不支持) outline-offset
【dimensionnement de la boîte】
[Remarque] Seul Firefox prend en charge la valeur de l'attribut padding-box
(IE7-不支持) box-sizing
[affichage]
[Remarque] Le navigateur IE7 ne prend pas en charge la valeur d'attribut de classe de table
(全兼容) display
[flottant]
(全兼容)floatclear
[Positionnement]
[Remarque] IE6 ne prend pas en charge le positionnement fixe : fixe
(全兼容) position left right top bottom z-index
[Lié au débordement]
<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
【Mise en page multi-colonnes】
(IE10+和chrome浏览器支持标准写法，firefox、safari浏览器及移动端android、IOS需要添加前缀) column-width column-count column-gap column-rule column-span(firefox不支持该属性) columns (只有firefox支持带前缀的column-fill属性) column-fill
【grille】
(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
【fonte】
(全兼容) font font-family font-size font-style font-variant font-weight line-height @font-face
【Texte de retrait de première ligne- indentation】
(全兼容) text-indent
【Alignement】
[Remarque] La valeur en pourcentage de l'alignement vertical dans le navigateur IE7 n'est pas la même. Prend en charge la hauteur de ligne décimale
--align (safari浏览器、IOS、androis4.4-浏览器不支持) text-align-last
[espacement]
(全兼容) word-spacing letter-spacing
[transformation de texte en majuscules et minuscules]
(全兼容) text-transform
【Souligner la décoration du texte】
(全兼容) text-decoration
【Espace blanc】
[Remarque] IE7-Browse Le processeur ne prend pas en charge les deux attributs valeursde pré-ligne et de pré-enveloppement
(全兼容) white-space
【Saut de ligne】
[Note 1] Le W3C recommande d'utiliser overflow-wrap à la place du mot -wrap
[Note2] Les terminaux mobiles ne prennent actuellement pas en charge la valeur d'attribut de word-breakkeep-all
--wrap
[Direction du texte]
-webkit--
[débordement de texte]
(全兼容) text-overflow
【text-shadow】
(IE9-不支持) text-shadow
【background】
(全兼容) background background-color background-image background-repeat background-position (IE8-不支持) background-attachment background-clip background-size
【Premier plan et transparence】
(全兼容) color (IE8-不支持) opacity
【Mode couleur】
[Remarque] IE7 ne prend pas en charge la couleur : transparent, mais prend en charge la couleur d'arrière-plan : transparent et border-color : transparent
-
[curseur]
[Remarque] IE7 ne prend pas en charge les styles étendus
(全兼容) 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
【transformation】
(IE9-不支持，safari3.-、android2.-.、IOS3.----
【Dégradé】
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
【Mode de fusion】
(IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀) mix-blend-mode background-blend-mode isolation
【Filtre】
(IE浏览器及android4.3-浏览器不支持，android4.4+需要添加-webkit-前缀) filter
【Reflection box-reflect】
Seuls les navigateurs Chrome et Safari le prennent en charge, et le préfixe -webkit- doit être ajouté
【va changer 】
(IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+) will-change
[Tableau]
(全兼容) 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
[Sélecteur]
(全兼容) 通配选择器 *元素选择器 div 类选择器 .box ID选择器 #box 后代选择器 div a 分组选择器 h1,p (IE6-不支持) 属性选择器 h1[class] 子元素选择器 ul > li 相邻兄弟选择器 div + p (IE7-不支持) 通用兄弟选择器 div ~ p
[Pseudo-classe]
(全兼容) :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 élément]
(只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持) :first-letter :first-line (IE7-不支持) :before :after (IE8-不支持) ::selection
[mot-clé]
(IE7-浏览器不支持) inherit (IE浏览器不支持) initial (IE不支持，safari9-不支持，ios9.2-不支持，android4.4.4-不支持) unset all (只有safari9.1+和ios9.3+支持) revert
【calc】
[Remarque] Android4.4-4.4.4 ne prend en charge que l'addition et la soustraction. IE9 ne prend pas en charge la position d'arrière-plan
(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
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
