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

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

DDD
DDDoriginal
2024-11-03 17:52:02658parcourir

Why Does overflow: hidden; Stop Working with position: relative; in IE6 and 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!

      Déclaration:
      Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn