Warum hat mein Bild in Chrome immer noch einen Rand, selbst mit „border: none;“?

Entfernen des Bildrandes in Chrome

Ein häufiges Problem bei der Arbeit mit Bildern in Chrome und IE9 ist das Erscheinen eines dauerhaft dünnen Randes um das Bild herum, obwohl „outline: none;“ angegeben wurde und 'Grenze: keine;' im CSS. Um dieses Problem zu beheben, ziehen Sie die folgenden Ansätze in Betracht:

Umgehung des Chrome-Fehlers

Chrome weist einen bekannten Fehler auf, der die Meldung „border: none;“ ignoriert. Stil. Um dies zu umgehen, verwenden Sie den folgenden CSS-ID-Block, um einen transparenten Bereich mit der gewünschten Auffüllung zu erstellen und Chrome effektiv zu der Annahme zu verleiten, dass es kein Bild gibt:

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

Duplizierung von Stilen

Eine andere Lösung besteht darin, die Stile zum Entfernen von Rahmen und Umrissen zu duplizieren, sowohl in CSS als auch über das Attribut border=0 von jQuery. Dieser redundante Ansatz kann manchmal dazu führen, dass der Browser die Stile korrekt anwendet.

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

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

Zusätzliche Überlegungen

Stellen Sie sicher, dass die Abmessungen der Bilddatei mit der Datei übereinstimmen angegebene Breite und Höhe in CSS. Wenn es eine Diskrepanz gibt, fügt der Browser möglicherweise einen Rahmen zum Ausgleich hinzu.

Durch die Implementierung dieser Lösungen können Sie den unerwünschten Bildrand in Chrome und IE9 effektiv entfernen und so für ein einheitliches und optisch ansprechendes Erscheinungsbild Ihrer Webseiten sorgen .

Das obige ist der detaillierte Inhalt vonWarum hat mein Bild in Chrome immer noch einen Rand, selbst mit „border: none;“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!