Une explication de la compatibilité CSS

Mots précédents

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 :

Attribut de modèle de boîte

【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

attribut de classe de mise en page

[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

Attribut de texte

【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 valeurs​​de 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

Attribut de classe de modification

【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

Autres attributs de classe

[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!