Wie behebt man Overflow:hidden-Probleme mit abgerundeten Ecken in Chrome und Opera?

Abgerundete CSS3-Ecken und Überlaufmaskierung in Chrome und Opera

Die Herausforderung entsteht, wenn versucht wird, überlaufende Inhalte aus seinen untergeordneten Elementen mithilfe abgerundeter Ecken zu verbergen auf einem übergeordneten Div. Während Overflow: Hidden in den meisten Browsern funktioniert, treten in WebKit-basierten Browsern wie Chrome und Opera Probleme auf, wenn das übergeordnete Element relativ oder absolut positioniert ist.

Um dieses Problem zu lösen, wurde eine Lösung entwickelt, die das Hinzufügen eines beinhaltet WebKit-CSS-Maske für das übergeordnete Element (#wrapper). Diese Maske verwendet ein Einzelpixel-PNG-Bild, das direkt in das CSS eingebettet werden kann, um unnötige HTTP-Anfragen zu vermeiden. Durch die Anwendung dieser Problemumgehung wird die Overflow: Hidden-Funktionalität in Chrome und Opera wiederhergestellt, wodurch alle Inhalte, die über die abgerundeten Ecken hinausgehen, effektiv ausgeblendet werden.

Das obige ist der detaillierte Inhalt vonWie behebt man Overflow:hidden-Probleme mit abgerundeten Ecken in Chrome und Opera?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!