Entfernen des schwer fassbaren Bildrandes in Chrome/IE9

Bei der Anzeige von Bildern in Chrome oder IE9 kann es trotz der Einstellung zu einem dauerhaft dünnen Rand kommen „outline: none“ und „border: none“ in CSS. Dieses Problem entsteht durch ein eigenartiges Chrome-Verhalten, das „border: none“ überschreibt.

Um dem entgegenzuwirken, können Sie eine clevere Technik anwenden, bei der die Bildbreite und -höhe auf 0 Pixel festgelegt und das Bild gleichzeitig mit entsprechenden Pixelwerten aufgefüllt wird auf die gewünschte Knopfgröße. Betrachten Sie das folgende CSS-Beispiel:

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

Indem Sie Chrome glauben machen, dass bei diesen Abmessungen kein Inhalt sichtbar ist, beseitigen Sie effektiv den Rand. Diese Technik stellt die Kompatibilität zwischen verschiedenen Browsern sicher und ermöglicht die Anzeige von Bildern ohne unschöne Ränder in Chrome.