Heim > Artikel > Web-Frontend > Warum funktioniert „overflow: hide“ nicht mit „position: relative“ in IE6 und IE7?

Warum funktioniert „overflow: hide“ nicht mit „position: relative“ in IE6 und IE7?

Susan SarandonOriginal: 2024-11-02 15:42:30155Durchsuche

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

IE6- und IE7-CSS-Problem mit „Überlauf: versteckt“ und „Position: relativ“

Dieses Problem tritt auf, wenn versucht wird, nicht- Aktive Folien in einem Schieberegler mit „Überlauf: Ausgeblendet“. In IE6 und IE7 funktioniert diese CSS-Eigenschaft nicht für Elemente mit der Anwendung „Position: relativ“.

Betrachten Sie die folgende isolierte HTML-Struktur:

<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>

Das Ziel besteht darin, das Nicht auszublenden -aktive Folien mit „overflow:hidden“ im Div „item-list“. Dies schlägt jedoch in IE6 und IE7 aufgrund des „position: relative“-Stils fehl, der auf „ul“ angewendet wird.

Die Lösung besteht darin, „position: relative“ zum Container des betreffenden Elements hinzuzufügen. Da in diesem Fall „body“ der Container ist, würde das Hinzufügen eines „div“ direkt darunter und das Festlegen seiner Position auf „relative“ das Problem lösen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow: hide“ nicht mit „position: relative“ in IE6 und IE7?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for using Property function this position overflow ul issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich verhindern, dass die Adressleiste in mobilen Browsern ausgeblendet wird?Nächster Artikel：Wie kann ich verhindern, dass die Adressleiste in mobilen Browsern ausgeblendet wird?

In Verbindung stehende Artikel

Mehr sehen