compatible CSS, c'est-à-dire méthode d'écriture

CSS est l'une des compétences importantes dans le développement front-end, mais différents navigateurs peuvent avoir une analyse et une prise en charge différentes pour CSS. Surtout dans le navigateur IE, cette différence est plus évidente. Afin de garantir que le site Web s'affiche correctement dans le navigateur IE, nous devons comprendre les problèmes de compatibilité des CSS dans IE. Cet article partagera quelques méthodes d'écriture CSS courantes compatibles avec IE pour aider les développeurs à surmonter ce problème.

1. Problème de compatibilité des sélecteurs

IE a des problèmes avec sa prise en charge de certains sélecteurs CSS. Par exemple, le sélecteur de pseudo-classe nth-child() dans CSS3 ne peut pas être analysé correctement dans IE7 et versions antérieures. De plus, dans IE 6 et versions antérieures, il ne prend pas en charge l'utilisation des sélecteurs « + » et « ~ » pour sélectionner ; le même niveau. Par conséquent, afin d'afficher correctement dans IE, vous pouvez utiliser JavaScript pour obtenir ces effets de sélecteur, ou utiliser des sélecteurs de secours en CSS.

Exemple :

/* IE6以及以下版本中是无法识别"+"和"~"选择器的 */
ul li + li {
  margin-left: 20px; /* 应用于选择器后方的li元素 */
}
ul li ~ li {
  padding-left: 10px; /* 应用于紧接着选择器后方的所有li元素 */
}
/* IE6及以下版本中的回退选择器 */
ul li { margin: 0; }
ul li:first-child { margin-left: 20px; }
ul li:last-child { margin-right: 20px; }

2. Problème de compatibilité avec le pourcentage de largeur

Dans IE6, lorsque la largeur d'un élément est définie par pourcentage, si la largeur de son élément parent est également définie par pourcentage, la largeur de l'élément peut être anormale . Pour résoudre ce problème, vous pouvez définir "display:inline-block" sur l'élément parent, puis définir sa largeur sur 100 %.

Exemple :

/* 在IE6中,当父元素宽度为百分比时,子元素百分比宽度会出现问题 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
  /* 在IE6中,需要在父元素上设置display:inline-block */
  display:inline-block;
}
/* 为了在其他浏览器中保持和IE同样的效果 */
.parent {
  width: 50%;
}
.child {
  width: 50%;
}

3. Problème de compatibilité de positionnement absolu

Dans IE, le positionnement d'un élément en position absolue n'est pas toujours relatif à son élément parent positionné le plus proche, mais peut être relatif à l'élément body. Pour résoudre ce problème, vous pouvez définir "position:relative" sur l'élément parent.

Exemple :

/* 在IE中，绝对定位元素可能会相对于body元素定位 */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

4. Effacer les problèmes de compatibilité flottante

Dans IE, les éléments flottants ne forcent pas l'élément parent à occuper la hauteur, ce qui entraînera de nombreux problèmes de mise en page. Nous devons donc vider le flotteur. Une méthode courante consiste à ajouter un élément vide à la fin de l'élément parent et à le définir sur "clear:both", mais cette méthode d'écriture ne fonctionne pas toujours dans IE. Il existe plusieurs façons de résoudre ce problème, dont l'une consiste à ajouter "overflow:hidden" à l'élément parent de l'élément flottant, ce qui le forcera à occuper la hauteur.

Exemple :

/* 在IE中，浮动元素不强制父元素占有高度 */
.parent {
  overflow: hidden;
  zoom: 1; /* 用于激活IE6和IE7中的hasLayout */
}
.child {
  float: left;
  width: 50%;
}

5. Problème de compatibilité avec la transparence de l'arrière-plan

Dans IE, si un arrière-plan est défini et que la transparence (opacité) est définie pour un élément, le texte et les sous-éléments de l'élément seront également transparents. Afin de résoudre ce problème, vous pouvez utiliser la méthode de filtrage unique d'IE pour ajouter de la transparence.

Exemple :

/* 在IE中，设置背景透明度会影响元素文本和子元素 */
.parent {
  background-color: #000;
  opacity: 0.5;
  /* 在IE中，使用滤镜来添加透明度 */
  filter: alpha(opacity=50);
}

6. Problème de compatibilité du modèle de bordure

Les versions IE6 et inférieures utilisent le "modèle de boîte IE", qui est différent de la spécification du W3C. Cela signifie que lorsque vous définissez la largeur d'un élément dans IE, sa largeur réelle sera supérieure à la valeur calculée directement en calculant la somme des largeurs de bordure, de remplissage et de contenu. Pour gérer correctement les bordures dans IE, vous pouvez utiliser un hack en CSS ou un calcul spécial en JavaScript.

Exemple :

/* 在IE6及以下版本中，应该将width宽度设置成.content的宽度 */
.box {
  width: 400px;
  height: 300px;
  padding: 10px;
  /* 在IE6及以下版本中，边框和内边距会导致元素实际宽度增加 */
  border: 1px solid #000;
  background-color: #fff;
}
/* 在其他浏览器中，边框和内边距不会导致元素实际宽度增加 */
.box {
  width: 422px;
  height: 322px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

7. Problème de compatibilité de la couleur d'arrière-plan du lien

Dans IE, lors de la définition de la couleur d'arrière-plan d'un lien, si le lien est actif ou visité, la couleur d'arrière-plan ne prendra pas effet. Pour résoudre ce problème, vous pouvez ajouter manuellement des styles actifs et visités au lien.

Exemple :

/* 在IE中设置链接背景色需要同时设置活动和已访问状态，否则会失效 */
a {
  background-color: #f00;
}
a:visited,
a:hover,
a:active {
  background-color: #f00;
}

Résumé

Ce qui précède est la manière courante d'écrire du CSS compatible avec IE. Bien entendu, nous pouvons rencontrer davantage de problèmes de compatibilité dans la pratique, qui nécessitent des tests et des tentatives de résolution continus. Le processus de compatibilité avec IE peut être fastidieux, mais c'est l'une des compétences que nous devons au moins comprendre et maîtriser, car en réalité, le navigateur IE détient encore une certaine part de marché, en particulier dans certains environnements d'entreprise anciens.

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!