it-swarm.com.de

Entfernen des Bildrahmens in Chrome/IE9

Ich versuche, den dünnen Rahmen, der für jedes Bild in Chrome & IE9 angezeigt wird, loszuwerden ... Ich habe dieses CSS:

outline: none;
border: none;

Mit jQuery fügte ich außerdem zu jedem Bildtag ein border=0-Attribut hinzu. Die im Bild gezeigte Umrandung erscheint jedoch weiterhin. Irgendeine Lösungsmöglichkeit?

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

Siehe angehängter Screenshot:

Screenshot

49
Prasad

Anstelle von border: none; oder border: 0; in Ihrem CSS sollten Sie Folgendes haben:

border-style: none;

Sie könnten dies auch so in das Image-Tag einfügen:

<img src="blah" style="border-style: none;">

Beides funktioniert, wenn das Bild keine src hat. Das obige ist für jene fiesen Linkgrenzen, die in einigen Browsern angezeigt werden, wenn die Grenzen sich weigern, Nizza zu spielen. Der dünne Rahmen, der angezeigt wird, wenn keine src vorhanden ist, liegt daran, dass Chrome zeigt, dass tatsächlich kein Bild in dem von Ihnen definierten Bereich vorhanden ist. Wenn Sie dieses Problem haben, versuchen Sie eine der folgenden Möglichkeiten:

  • Verwenden Sie ein <div> anstelle eines <img>-Elements (das Erstellen eines Elements mit einem Hintergrundbild ist ohnehin alles, was Sie gerade tun, der <img>-Tag wird wirklich nicht verwendet) 
  • Wenn Sie ein <img>-Tag benötigen, müssen Sie die Lösung von Randy King verwenden 
  • Definiere ein Bild src
51
Zach

Es ist ein Chrome-Fehler, der "border: none;" ignoriert. Stil.

Angenommen, Sie haben ein Bild "download-button-102x86.png" mit einer Größe von 102x86 Pixel. In den meisten Browsern sollten Sie diese Größe für Breite und Höhe reservieren. Chrome zeichnet jedoch nur eine Umrandung, egal was Sie tun.

Sie täuschen Chrome damit zu denken, dass nichts da ist - Größe von 0px durch 0px, aber mit genau der richtigen Menge an "Auffüllen", um den Knopf zuzulassen. Hier ist ein CSS-ID-Block, den ich dazu benutze ...

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

Voila! Funktioniert überall und entfernt den Umriss/Rand in Chrome.

52
Randy King

Für alle, die die Grenze loswerden möchten, wenn die Quelle leer ist oder keine Quelle vorhanden ist, verwenden Sie einfach diesen Stil:

IMG[src=''], IMG:not([src])      {opacity:0;}

Das IMG-Tag wird vollständig ausgeblendet, bis Sie eine SRC hinzufügen

15
John

Fügen Sie das Attribut border = "0" im img-Tag hinzu

6
Amareswar

Wenn Sie versuchen, den Chrome-Fehler beim Laden von Bildern zu beheben, aber Sie möchten, dass Ihr Platzhalterbild (beispielsweise mit Lazy Loading-Bildern) geladen wird, können Sie Folgendes tun: 

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

Dadurch wird der Rand im Überlauf des Containers ausgeblendet, und Sie können ihn nicht sehen. 

Drehe das:  Chrome border bug

Das sehr gut finden:  Chrome border bug fixed

3
aaron-coding

Wenn Sie keine src definiert haben oder das src-Attribut in einem img-Tag leer ist, erstellen die meisten Browser einen Rahmen. Um dies zu beheben, verwenden Sie ein transparentes Bild als src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
2
code19

Ich mochte die Lösung von Randy King, weil Chrome das "border: none" -Stil ignoriert, aber es ist ein bisschen komplex zu verstehen und funktioniert nicht in ie6 und älteren Browsern. An seinem Beispiel können Sie Folgendes tun:

css:

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

html

<ins class="noborder"></ins>

Vergewissern Sie sich, wenn Sie das INS-Tag verwenden, um es mit einem "" zu schließen, da sonst die Formatierung funky aussehen wird.

2
sksallaj

Sie können den Rand entfernen, indem Sie den Texteinzug auf eine sehr große Zahl setzen, aber auch das Alt des Bildes wird verschwunden sein

img:not([src]) {
    text-indent: 99999px !important;
}
1
Hoang Trung

inline css

<img src="logo.png" style="border-style: none"/>
1
user2645981

die Verwendung von border = "0" ist ein affektiver Weg, aber Sie müssen dieses Attribut für jedes Bild hinzufügen.

ich habe die folgende jQuery verwendet, um dieses Attribut für jedes Bild hinzuzufügen, da ich diese Konturen und Ränder um Bilder hasse.

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });
1
OldTrain

Fügen Sie in Ihrem img src-Tag ein border = "0" hinzu, zum Beispiel <img src="img.jpg" border="0">, wie oben von @Amareswar erläutert

1
doodoodukes

es hat für mich funktioniert. Es hat Tage gedauert, die mich verrückt gemacht haben.

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}
0
vahid sabet

dasselbe wie @ aaron-coding und @ randy-king - aber nur ein allgemeinerer, um den Bildrand auszublenden, bevor er geladen wird (d. h. mit lazy-load.js oder so

(anscheinend kann ich in meinem ursprünglichen Kommentar keinen Code-Block erstellen)

.lazy-load-borderFix {
  display: block;
  width: 1px !important;
  height: 1px !important;
  outline: none;
  padding: 0px;
  margin: -4px;
  background-image:none !important;
  background-repeat:no-repeat;
}
0
rwcorbett

Ich hatte ein ähnliches Problem bei der Anzeige eines PNG-Bildes in einem Div-Tag. Eine dünne (1 px große) schwarze Linie wurde auf der Bildseite gerendert. Um das Problem zu beheben, musste ich den folgenden CSS-Stil hinzufügen: box-shadow: none;

0
Zerato

Ich repariere es mit dem Polsterungsstil:

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
} 

Der Rand verschwindet, während Sie den Füllwert erhöhen. Finde deinen eigenen Wert. 

0
Alexandr