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 contrecarrer ce problème, 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 :

#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;
}

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.