Pourquoi mon image a-t-elle toujours une bordure dans Chrome et IE9 malgré l'utilisation de CSS et jQuery ?

Résolution du problème de bordure d'image dans Chrome et IE9

Ce fil de discussion traite d'un problème où une bordure visible apparaît autour des images dans Chrome et Internet Explorer 9 malgré les tentatives de suppression à l'aide de CSS et jQuery.

Le code CSS fourni :

<code class="css">outline: none;
border: none;</code>

désactive à la fois le contour et la bordure, tandis qu'un attribut border=0 est ajouté à toutes les balises d'image. Cependant, la bordure persiste.

La cause première de ce problème est un bug dans Chrome qui ne tient pas compte de la bordure : aucune ; style. Pour contourner le problème, nous devons faire croire à Chrome qu’il n’y a aucun contenu à afficher. Voici une solution utilisant un bloc d'ID CSS :

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

Cela définit la taille de l'image à zéro mais inclut un remplissage avec les dimensions de l'image réelle. Chrome est effectivement amené à penser qu'il n'y a pas d'image tout en laissant de l'espace pour l'image d'arrière-plan du bouton. Cette solution élimine le contour et la bordure indésirables dans Chrome et les autres navigateurs.

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!