Warum hat mein Bild in Chrome und IE9 trotz Verwendung von CSS und jQuery immer noch einen Rand?

Behebung des Bildrandproblems in Chrome und IE9

Dieser Thread befasst sich mit einem Problem, bei dem in Chrome und Internet Explorer 9 ein auffälliger Rand um Bilder herum erscheint trotz Versuchen, es mit CSS und jQuery zu entfernen.

Das bereitgestellte CSS Code:

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

deaktiviert sowohl Umriss als auch Rahmen, während allen Bild-Tags ein border=0-Attribut hinzugefügt wird. Der Rand besteht jedoch weiterhin.

Die Hauptursache für dieses Problem ist ein Fehler in Chrome, der den Rand ignoriert:none; Stil. Um dieses Problem zu umgehen, müssen wir Chrome dazu verleiten, zu glauben, dass keine Inhalte angezeigt werden können. Hier ist eine Lösung mit einem CSS-ID-Block:

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

Dadurch wird die Größe des Bildes auf Null gesetzt, aber die Auffüllung erfolgt mit den Abmessungen des tatsächlichen Bildes. Chrome wird effektiv dazu verleitet, zu denken, dass kein Bild vorhanden ist, während Platz für das Hintergrundbild der Schaltfläche gelassen wird. Diese Lösung beseitigt unerwünschte Umrisse und Ränder sowohl in Chrome als auch in anderen Browsern.

Das obige ist der detaillierte Inhalt vonWarum hat mein Bild in Chrome und IE9 trotz Verwendung von CSS und jQuery immer noch einen Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!