Pourquoi mon image a-t-elle toujours une bordure dans Chrome, même avec « border : none ; » ?

Suppression de la bordure de l'image dans Chrome

Un problème fréquent rencontré lors de l'utilisation d'images dans Chrome et IE9 est l'apparition d'une fine bordure persistante. autour de l'image, malgré la spécification de « contour : aucun ; » et « frontière : aucune ; » dans le CSS. Pour résoudre ce problème, envisagez les approches suivantes :

Contournement des bogues de Chrome

Chrome présente un bug connu qui ignore la « frontière : aucune ; » style. Pour contourner ce problème, utilisez le bloc d'identification CSS suivant pour créer une zone transparente avec le remplissage souhaité, faisant ainsi croire à Chrome qu'il n'y a pas d'image :

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

Duplication des styles

Une autre solution consiste à dupliquer les styles de suppression de bordure et de contour, à la fois en CSS et via l'attribut border=0 de jQuery. Cette approche redondante peut parfois forcer le navigateur à appliquer les styles correctement.

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

Considérations supplémentaires

Assurez-vous que les dimensions du fichier image correspondent à celles largeur et hauteur spécifiées en CSS. En cas d'écart, le navigateur peut ajouter une bordure pour compenser.

En mettant en œuvre ces solutions, vous pouvez supprimer efficacement la bordure d'image indésirable dans Chrome et IE9, offrant ainsi une apparence cohérente et visuellement agréable à vos pages Web. .

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!