Warum haben Bilder in Chrome und IE9 immer noch Ränder, auch mit „border: none;'?

Techniken zur Randunterdrückung in Chrome und IE9

Das Entfernen des unschönen Randes, der in Chrome und IE9 um Bilder herum bestehen bleibt, kann eine frustrierende Aufgabe sein. Obwohl die Randeigenschaften auf „none“ gesetzt sind, behalten diese Browser hartnäckig eine dünne Linie bei.

Mögliche Ursachen und Lösungen:

• Chrome-Fehler: Chrome ignoriert „border:none;“ Stil, insbesondere für Bilder mit bestimmten Abmessungen. Um dies zu umgehen, bringen Sie Chrome dazu, keine Bildpräsenz wahrzunehmen, indem Sie eine Breite und Höhe von Null zuweisen, gepaart mit präzisen Füllwerten, um die gewünschte Bildgröße zu berücksichtigen.
• IE9-Verhalten: IE9 fügt eine Pixel- Dünner Auswahlrahmen um Bilder herum, wenn auf das Bild geklickt wird. Um dies zu verhindern, deaktivieren Sie die Eigenschaft „Benutzerauswahl“.

Beispielimplementierung:

CSS für Chrome-Fehler:

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

CSS für IE9-Auswahlrahmen:

<code class="css">img {
    -ms-user-select:none;
    user-select:none;
}</code>

Zusätzliche Tipps:

• Stellen Sie sicher, dass das Bild vorhanden ist nicht in andere Elemente mit Rändern eingeschlossen.
• Überprüfen Sie, ob Herstellerpräfixe das Erscheinungsbild des Rahmens beeinflussen.
• Versuchen Sie, die Hardwarebeschleunigung vorübergehend zu deaktivieren, um zu sehen, ob sie sich auf das Randverhalten auswirkt.

Das obige ist der detaillierte Inhalt vonWarum haben Bilder in Chrome und IE9 immer noch Ränder, auch mit „border: none;'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!