Comment résoudre le débordement : problèmes cachés avec les coins arrondis dans Chrome et Opera ?-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Comment résoudre le débordement : problèmes cachés avec les coins arrondis dans Chrome et Opera ?

Barbara Streisand

Dec 16, 2024 pm 08:08 PM

How to Fix Overflow:hidden Issues with Rounded Corners in Chrome and Opera?

Coins arrondis CSS3 et masquage de débordement dans Chrome et Opera

Le défi se pose lorsque l'on essaie de masquer le contenu débordant de ses éléments enfants à l'aide de coins arrondis sur une division parent. Bien que overflow: Hidden fonctionne dans la plupart des navigateurs, il rencontre des problèmes dans les navigateurs basés sur WebKit comme Chrome et Opera lorsque l'élément parent est positionné de manière relative ou absolue.

Pour résoudre ce problème, une solution a émergé qui consiste à ajouter un Masque CSS WebKit à l'élément parent (#wrapper). Ce masque utilise une image PNG d'un seul pixel, qui peut être intégrée directement dans le CSS pour éliminer les requêtes HTTP inutiles. En appliquant cette solution de contournement, le débordement : la fonctionnalité cachée est restaurée dans Chrome et Opera, masquant efficacement tout contenu s'étendant au-delà des coins arrondis.

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Popovers réutilisables pour ajouter un peu de popApr 17, 2025 am 11:02 AM

Un popover est une vue transitoire qui apparaît sur un contenu à l'écran lorsqu'un utilisateur clique sur un bouton de commande ou dans une zone définie. Par exemple,

Styling Liens avec de véritables soulignementsApr 17, 2025 am 10:57 AM

Avant de venir à la façon de coiffer, nous devrions répondre à la question: devrions-nous souligner?

Actualités hebdomadaires de la plate-forme: attribut HTML Loading, les principales spécifications Aria et le passage de iframe à Shadow DomApr 17, 2025 am 10:55 AM

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

Orteil Tic Tic multijoueur avec GraphQLApr 17, 2025 am 10:54 AM

GraphQL est un langage de requête pour les API qui est très stimulant pour les développeurs frontaux. Comme le site GraphQL l'explique, vous décrivez vos données, demandez ce

Opérations logiques avec des variables CSSApr 17, 2025 am 10:44 AM

Très souvent, tout en utilisant des variables de commutation (une variable qui soit 0 ou 1, un concept qui a expliqué en détail dans cet article), je souhaite que je puisse pouvoir

Videos YouTube à chargement paresseuxApr 17, 2025 am 10:40 AM

C'est une idée très intelligente via Arthur Corenzan. Plutôt que d'utiliser l'intégration YouTube par défaut, qui ajoute un Crapload de ressources à une page si l'utilisateur joue

Pouvez-vous faire pivoter le curseur dans CSS?Apr 17, 2025 am 10:28 AM

En quelque sorte! Il n'y a pas de moyen simple ou standard de le faire, mais cela est possible. Vous pouvez changer le curseur en différentes versions natives intégrées avec CSS avec le

Menu hamburger avec un côté de crochets de réact et de composants stylisésApr 17, 2025 am 10:21 AM

Nous savons tous ce qu'est un menu de hamburger, non? Lorsque le modèle a commencé à faire son chemin dans les conceptions Web, elle était à la fois moquée et applaudi pour son minimalisme

See all articles