Maison > Article > interface Web > Pourquoi « overflow : Hidden » ne fonctionne-t-il pas avec « position : relative » dans IE6 et IE7 ?

Pourquoi « overflow : Hidden » ne fonctionne-t-il pas avec « position : relative » dans IE6 et IE7 ?

Susan Sarandonoriginal: 2024-11-02 15:42:30155parcourir

Why Doesn't `overflow: hidden` Work with `position: relative` in IE6 and IE7?

Problème CSS IE6 et IE7 avec "overflow: caché" et "position: relative"

Ce problème survient lors de la tentative de masquer des non- activez les diapositives dans un slider en utilisant "overflow: caché". Dans IE6 et IE7, cette propriété CSS ne fonctionne pas pour les éléments avec "position : relative" appliquée.

Considérez la structure HTML isolée suivante :

<code class="html"><!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 900px;
    }

    ul {
      width: 2000px;
      left: -499px;
      position: relative;
    }

    li {
      display: block;
      float: left;
    }

    .item-list {
      overflow: hidden;
      width: 499px;
    }
  </style>
</head>
<body>
  <div class="item-list">
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</body>
</html></code>

Le but est de masquer les éléments non -diapositives actives utilisant "overflow: caché" sur le div "item-list". Cependant, cela échoue dans IE6 et IE7 en raison du style "position: relative" appliqué au "ul".

La solution réside dans l'ajout de "position: relative" au conteneur de l'élément en question. Dans ce cas, puisque « body » est le conteneur, ajouter un « div » directement en dessous et définir sa position sur « relative » résoudrait le problème.

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!

css html for using Property function this position overflow ul issue

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

Article précédent：Comment puis-je empêcher la barre d’adresse de se cacher dans les navigateurs mobiles ?Article suivant：Comment puis-je empêcher la barre d’adresse de se cacher dans les navigateurs mobiles ?

Articles Liés

Voir plus