Pourquoi déborde-t-il : caché ; Arrêter de travailler avec la position : relative ; dans IE6 et IE7 ?

IE6 IE7 CSS Problème de débordement : caché ; - position : relative ; Combo

Dans une tentative de créer un curseur de page d'accueil qui utilise jQuery pour parcourir les images, leurs titres respectifs et les teasers, un développeur a rencontré un problème déroutant. Alors que le curseur fonctionnait parfaitement dans d'autres navigateurs, il fonctionnait mal dans IE6 et IE7, notamment en ce qui concerne le masquage des diapositives inactives à l'aide de overflow: Hidden;.

Une page HTML isolée a été méticuleusement recréée pour identifier le code problématique :

<code class="html"><style>
  ul {
    position: relative;
  }

  .item-list {
    overflow: hidden;
    width: 499px;
  }
</style></code>

Après une enquête approfondie, il a été découvert que le coupable était la « position : relative ; » attribut appliqué à l'attribut

élément. Dans IE6 et IE7, cet attribut entraînait un débordement : caché ; devenant inefficace. Cependant, la suppression de cet attribut interromprait la fonctionnalité du curseur JavaScript, qui utilisait l'attribut gauche de l'attribut
élément pour faire glisser le contenu.

Solution :

Pour résoudre le problème, il a été conseillé au développeur d'ajouter position: relative; à l'élément conteneur à la place. Dans ce cas, cela signifierait ajouter un

directement sous le et en lui donnant le style susmentionné. Cette modification a résolu efficacement le conflit, permettant au curseur de fonctionner correctement dans IE6 et IE7 sans compromettre sa fonctionnalité dans d'autres navigateurs.

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!