Pourquoi le comportement du rayon de bordure de Safari diffère-t-il de celui des autres navigateurs ?

Incohérence du rayon de bordure du navigateur : comportement surprenant de Safari

Lors du processus de style d'un site Web, nous avons rencontré un problème particulièrement gênant. Lors du développement d'une fonctionnalité affichant les images de profil utilisateur avec des coins arrondis, tout semblait fonctionner de manière transparente dans Internet Explorer 8 et supérieur, Google Chrome et Mozilla Firefox. Cependant, Safari a présenté un comportement assez particulier.

Pour illustrer ce problème, nous avons créé une image avec une bordure de 3 px et appliqué un rayon de bordure de 50 %. Tout semblait normal jusqu'à ce que nous ouvrions la même page dans Safari. La bordure n'apparaissait pas comme un cercle parfait mais tronquait plutôt l'image, conduisant à un effet visuel indésirable.

Après une enquête plus approfondie, nous avons réalisé que l'interprétation du rayon de la bordure par Safari différait de celle des autres navigateurs. Alors qu'IE, Chrome et Firefox ont recadré la bordure du centre de l'image, Safari l'a recadrée à partir de la limite la plus externe de l'élément. Cette distinction a entraîné une troncature involontaire de l'image elle-même.

Pour résoudre ce problème, nous avons mis en œuvre une solution de contournement qui séparait la bordure de l'image. En plaçant l'image dans un conteneur, nous avons pu appliquer un rayon de bordure à la fois à l'image et au conteneur, en veillant à ce que les deux aient des coins arrondis.

Voici un extrait du code HTML et CSS qui a résolu le problème dans Safari :

<div class="activity_rounded"><img src="http://placehold.it/100" /></div>

.activity_rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    border: 3px solid #fff;
}

.activity_rounded img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    vertical-align: middle;
}

Avec cette approche, Safari affiche désormais l'image du profil utilisateur avec une bordure circulaire parfaite, cohérente avec les autres navigateurs. De plus, vous pouvez tester cette solution dans notre démo en direct pour la voir en action.

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!