Comment supprimer les bordures d'image persistantes dans Chrome et IE9 ?

Suppression de la bordure d'image insaisissable dans Chrome/IE9

Lors de l'affichage d'images dans Chrome ou IE9, vous pouvez rencontrer une fine bordure persistante malgré le réglage "contour : aucun" et "bordure : aucun" en CSS. Ce problème est dû à un comportement particulier de Chrome qui remplace "border: none".

Pour contrer cela, vous pouvez utiliser une technique intelligente qui consiste à définir la largeur et la hauteur de l'image sur 0 px tout en la remplissant avec les valeurs de pixels correspondantes. à la taille de bouton souhaitée. Prenons l'exemple CSS suivant :

<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>

En faisant croire à Chrome qu'il n'y a pas de contenu visible à ces dimensions, vous éliminez efficacement la bordure. Cette technique garantit la compatibilité entre différents navigateurs et vous permet d'afficher des images sans bordures disgracieuses dans Chrome.

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!