Warum funktioniert „overflow: versteckt' nicht bei „position: relative' „ul' in IE6 und IE7?-CSS-Tutorial-php.cn

Warum funktioniert „overflow: versteckt' nicht bei „position: relative' „ul' in IE6 und IE7?

Patricia Arquette

Freigeben： 2024-11-03 05:12:02

Original

203 Leute haben es durchsucht

Why Does `overflow: hidden` Not Work on a `position: relative` `ul` in IE6 and IE7?

IE6 IE7 CSS-Problem: Overflow: Hidden funktioniert nicht mit Position: Relative

Das Problem tritt auf, wenn overflow: versteckt verwendet wird; um inaktive Folien innerhalb eines Schiebereglers in IE6 und IE7 auszublenden. Die Overflow-Eigenschaft funktioniert nicht, wenn sie auf ein ul-Element mit position: relative; angewendet wird. darauf setzen. Dieses Hindernis verhindert, dass das Element korrekt verborgen wird.

Eine Untersuchung des bereitgestellten HTML-Codes zeigt, dass position: relative; wird tatsächlich auf das ul-Element angewendet. Dies ist jedoch für die JavaScript-Funktionalität des Schiebereglers erforderlich, die darauf angewiesen ist, das linke Attribut des ul anzupassen, um den Inhalt zu verschieben.

Lösung:

Die Lösung hierfür Das Problem besteht darin, einen bekannten Fehler in IE6 und IE7 zu verstehen. Um diesen Fehler zu beheben, fügen Sie position: relative; zum Container des ul-Elements. Im bereitgestellten Code ist der Körper der Container. Daher besteht die empfohlene Lösung darin, ein div direkt unter dem Körper hinzuzufügen und position: relative; dazu.

Um den Fix zu veranschaulichen:

<code class="html"><body>
  <div style="position: relative;">
    <!-- Slider code here -->
  </div></code>

Nach dem Login kopieren

Durch Hinzufügen dieses zusätzlichen Div mit position: relative; zum Code, der Überlauf: versteckt; Die Eigenschaft für das ul-Element funktioniert in IE6 und IE7 ordnungsgemäß, sodass die inaktiven Folien wie erwartet ausgeblendet werden können.

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