Pourquoi « overflow : Hidden » ne fonctionne-t-il pas avec « position : relative

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

Susan Sarandon

Libérer： 2024-11-02 15:42:30

original

249 Les gens l'ont consulté

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>

Copier après la connexion

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!