Entfernen des Bildrandes in Chrome

Ein häufiges Problem, das bei der Arbeit mit Bildern in Chrome und IE9 das Erscheinen eines anhaltenden dünnen Randes um das Bild ist, trotz des Spezifikums 'Outline: No; und "Grenze: Keine;" im CSS. Um dieses Problem zu lösen, betrachten Sie die folgenden Ansätze:

Chrome -Fehler Umfang

Chrome hat einen bekannten Fehler, der den "Grenze: Keine;" ignoriert; Stil. Um dies zu umgehen, verwenden Sie den folgenden CSS -ID -Block, um einen transparenten Bereich mit der gewünschten Polsterung zu erstellen und Chrome effektiv zu denken, dass es kein Bild gibt:

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

Duplication of Styles

Eine andere Lösung besteht darin, die Rand- und Umrissstile sowohl in CSS als auch über JQuery's Border = 0 -Attribut zu duplizieren. Dieser redundante Ansatz kann den Browser manchmal dazu zwingen, die Stile richtig anzuwenden.

img, a img {
    outline: none;
    border: none;
}

$(document).ready(function(){
    $('img').attr('border', '0');
});

zusätzliche Überlegungen

stellen sicher, dass die Dimensionen der Bilddatei mit der angegebenen Breite und Höhe in CSS übereinstimmen. Wenn es eine Diskrepanz gibt, kann der Browser einen Grenze hinzufügen, um es zu kompensieren.

Wenn Sie diese Lösungen implementieren, können Sie den unerwünschten Bildrand in Chrome und IE9 effektiv entfernen und ein konsistentes und visuell ansprechendes Erscheinungsbild für Ihre Webseiten bieten.