Comment supprimer les bordures d'image indésirables dans Chrome et IE9 ?

Suppression des bordures d'image dans Chrome et IE9

L'un des défis lors de la conception pour le Web est d'assurer une présentation visuelle cohérente dans les différents navigateurs. Cependant, certains problèmes peuvent survenir, comme l'apparition d'une bordure indésirable autour des images dans Chrome et IE9.

Pour éliminer cette bordure, vous avez peut-être tenté d'utiliser des propriétés CSS comme outline: none et border: none, mais en vain. En effet, Chrome a un bug connu qui ignore le style de bordure : aucun.

La clé pour résoudre ce problème est de tromper Chrome pour qu'il perçoive l'image comme n'ayant aucune dimension. Créer un élément avec une largeur et une hauteur de 0 px, puis ajouter un remplissage approprié pour compenser la taille de l'image souhaitée permettra d'y parvenir.

Voici un exemple de bloc CSS pour exécuter cette solution de contournement :

<code class="css">#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}</code>

Cette méthode élimine efficacement le contour et la bordure dans Chrome tout en conservant la taille d'image souhaitée.

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!