Wie behebt man den Überlauf: Versteckter Fehler in festen übergeordneten/untergeordneten Elementen?

Überlauf: Versteckter Fehler in festen übergeordneten/untergeordneten Elementen

Beim Festlegen des Überlaufs: ausgeblendet bei einem festen übergeordneten Element und allen darin enthaltenen untergeordneten Elementen kann außerhalb seiner Grenzen sichtbar werden. Dies liegt an der Art und Weise, wie die feste Positionierung in den meisten Browsern gehandhabt wird.

Um dieses Problem zu beheben, können Sie die CSS-Clip-Eigenschaft verwenden:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
  clip: rect(0px, 300px, 300px, 0px); /* Clip the parent to its own dimensions */
}

Indem Sie die Clip-Eigenschaft auf dem übergeordneten Element festlegen Element definieren Sie einen rechteckigen Bereich, der den sichtbaren Teil des Elements und seiner Elemente begrenzt Kinder.

Überlegungen:

• Vermeiden Sie die Verwendung statischer oder relativer Positionierung für das übergeordnete Element. Erwägen Sie die Verwendung eines absolut positionierten übergeordneten Elements innerhalb eines relativ positionierten Containers.
• Prozentsätze werden für Clipkoordinaten nicht unterstützt. Verwenden Sie „Auto“, um 100 % darzustellen.
• Die Positionierung untergeordneter Elemente und CSS3-Transformationen (z. B. Skalierung) können in bestimmten Browsern (z. B. IE11 und Chrome34) eingeschränkt sein.

Zur Verbesserung der Kompatibilität Erwägen Sie, dem untergeordneten Element die folgenden Stile hinzuzufügen:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Browser Kompatibilität:

• IE8: Menü wird angezeigt, aber Links sind nicht anklickbar
• IE9: Menü nicht sichtbar, wenn teilweise unterhalb der Falte
• iOS Safari <5 : Menü wird nicht richtig angezeigt
• iOS Safari 5 : Ausgeschnittene Inhalte werden möglicherweise neu dargestellt scrollen
• FF (13), IE10, Chrome, Chrome für Android: Verhalten sich im Allgemeinen wie erwartet

Beachten Sie, dass dieser Ansatz von älteren oder mobilen Browsern möglicherweise nicht vollständig unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie behebt man den Überlauf: Versteckter Fehler in festen übergeordneten/untergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!