Wie umgebrochene Bilder im Webkit entfernen?

Kann mir jemand dazu raten? WebKit-Browser setzen weiterhin einen grauen 1px-Rahmen um deaktivierte Bilder. Der Grund, warum ich dies entfernen muss, ist die E-Mail-Optimierung, wenn E-Mail-Clients Bilder deaktiviert haben. Funktioniert gut in Firefox, aber WebKit-Browser zeigen weiterhin den Rand an.Wie umgebrochene Bilder im Webkit entfernen?

Ich habe versucht border:none !important überall einschließlich Inline, aber Chrome/Safari sind stur.

Edit: Hier ist ein Beispiel html mit Inline-CSS

<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />

Quelle

2012-10-31 Van Nguyen

verwendet für -webkit-border: 0; –

Meinst du sowas wie: Tabelle, img {-webkit-border: 0! Wichtig;}? Funktioniert immer noch nicht. –

können Sie Ihren Code html oder css –

Es gibt keine Möglichkeit, es zu entfernen, aber ich habe das Bild in ein Element eingewickelt, das über versteckte Eigenschaft in seinen Stilen überläuft.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Hide Broken Image border</title> 
    <style> 
    body{ 
     background-color:azure; 
    } 
    .image-container{ 
     width:100px; 
     height:100px; 
     overflow:hidden; 
     display:block; 
     background-color:orange; /*not necessary, just to show the image box, can be added to img*/ 
    } 
    .image-container img{ 
     margin:-1px; 
    } 
    </style> 
</head> 
<body> 
    <span class="image-container"> 
    <img src="path-to-image" alt="I'm Broken :(" width="102" height="102"> 
    </span> 
</body> 
</html>

Werfen Sie einen Blick auf diese ist http://jsbin.com/OpAyAZa/1/edit

Quelle

2013-11-27 07:46:31

Schöne, lassen Sie mich es über E-Mail-Clients testen –

Versuchen Sie, einige JavaScript mit dem gebrochenen Bild zu entfernen. Das ist der einzige Weg,

var images = document.getElementsByTagName("img"); 
for (i = 0; i < images.length; i++) { 
    var self = images[i]; 
    self.onerror = function() { 
     self.parentNode.removeChild(self); 
    } 
}

Da Rendering von gebrochenem Bild variiert von Browser zu Browser und es nicht geändert werden kann.

P. S: onerror wird ausgelöst, wenn das Bild nicht

Quelle

2012-10-31 04:47:45 naveen

Danke, aber dies ist für E-Mails, so dass Javascript nicht verfügbar ist. –

Dann versuchen Sie Hilsons Lösung. das ist eine bessere Idee – naveen

Browser scheint nicht wirklich Ihnen eine Möglichkeit zu geben, um diese Grenze zu entfernen geladen wird. Ihre einfachste Lösung besteht darin, Ihren img in ein div zu ändern und das Bild als Hintergrund anzuwenden.

Auf diese Weise, wenn es keine src gibt, werden Sie nicht das gebrochene Bildsymbol und Rand erhalten.

Update: Microsoft Outlook macht die Dinge schwierig, und die Heilung ist fast schlimmer als die Krankheit: Vektor-Markup-Sprache, Formelemente, Bilddatenelemente, etc. Wenn Sie um Sie google werden sehen, wie sie verwenden http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Outlook-Benutzer müssen möglicherweise nur auf das Bild verzichten, so dass Sie es einen Tag nennen können.

Quelle

2012-10-31 04:49:27

Yeah habe daran gedacht, aber E-Mails nicht wirklich wie Hintergrundbilder (Outlook ist der Hauptschuldige dafür) –

Cool, ich werde dies für jetzt akzeptieren, war auf irgendeine Art von css Hack zu Webkit override hoffen Standard CSS. –

Wenn imgsrc nicht vorhanden oder defekt ist, dann verwendet unter css Code

img:not([src]){ display:none; }

diese css Bild verbirgt bis imgsrc nicht vollständig geladen .

Quelle

2015-10-28 09:26:23 Amit

Danke, aber wie können wir Inline-Pseudo-Stile? –

Amits Antwort ist einfach großartig, aber ein kleiner Tipp: Verwendung Sichtbarkeit: versteckt; anstelle von Anzeige: keine;

img:not([src]){ 
    visibility: hidden; 
}

so könnten Sie img Blockgröße und die Positionierung anderer Elemente speichern. es ist in den meisten Fällen nützlich, ich benutze es auf meinen Seiten mit Bildern lazyload und zeigen nur leere Block, bevor das Bild lädt.

Quelle

2015-12-10 15:22:52 kabantejay

Vielen Dank dafür! Dies ist das einzige, was für mich funktioniert :) – Michael

Dies ist eine großartige Lösung, wenn Sie Lazy Loading verwenden. –

-1

Sie können diesen Code versuchen, Ränder um defekte Bilder in Webkit zu entfernen.

var images = document.getElementsByTagName("img"); 

for (i = 0; i < images.length; i++) { 
    var self = images[i]; 
    self.onerror = function() { 
     self.parentNode.removeChild(self); 
    } 
}

Quelle

2017-01-13 05:46:59

Wie umgebrochene Bilder im Webkit entfernen?

Antwort

Verwandte Themen