Jak usunąć granice wokół uszkodzonych obrazów w webkicie?

Czy ktoś może mi doradzić w tej sprawie? Przeglądarki WebKit wciąż umieszczają szarą granicę 1px wokół obrazów wyłączonych. Powodem, dla którego tego potrzebuję, jest optymalizacja poczty e-mail, gdy klienci poczty e-mail mają wyłączone obrazy. Działa dobrze w przeglądarce Firefox, ale przeglądarki WebKit nadal wyświetlają ramkę.Jak usunąć granice wokół uszkodzonych obrazów w webkicie?

Próbowałem już border:none !important wszędzie w tym miejscu, ale Chrome/Safari są uparte.

Edycja: Oto przykładowy html z 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" />

Źródło

2012-10-31 Van Nguyen

użyte do -webkit-border: 0; –

Czy masz na myśli coś takiego: table, img {-webkit-border: 0! Important;}? Wciąż nie działa. –

możesz pokazać swój kod html lub css –

Nie ma sposobu, aby go usunąć, ale owinąłem obraz w elemencie, który ma ukrytą właściwość przepełnienia w swoich stylach.

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

Spójrz na tego kosza http://jsbin.com/OpAyAZa/1/edit

Źródło

2013-11-27 07:46:31

Niezła, pozwól mi przetestować to przez e-mail klientów –

Spróbuj użyć trochę JavaScript, aby usunąć uszkodzonego obrazu. Jest to jedyny sposób, ponieważ renderowanie uszkodzonego obrazu różni się w zależności od przeglądarki i nie można go zmienić.

P.S: onerror zadziała wtedy, gdy obraz nie jest załadowany

Źródło

2012-10-31 04:47:45 naveen

Dzięki, ale to dotyczy wiadomości e-mail, więc javascript nie jest dostępny. –

następnie spróbuj rozwiązania hilsons. To jest lepszy pomysł – naveen

Przeglądarki nie wydają się naprawdę daje sposób, aby usunąć tę granicę. Najprostszym rozwiązaniem jest zmiana pliku IMG na element div i zastosowanie obrazu jako tła.

W ten sposób, jeśli nie ma src, nie dostaniesz ikony zepsutego obrazu i obramowania.

Aktualizacja: Microsoft Outlook sprawia, że rzeczy trudne, a lekarstwo jest prawie gorsze niż choroba: języka Vector Markup, elementy kształt, elementy imageData itp Jeśli google wokół ciebie zobaczymy jak z nich korzystać http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Użytkownicy programu Outlook mogą po prostu przejść bez obrazu, aby móc go nazwać dziennie.

Źródło

2012-10-31 04:49:27

Tak, pomyśleliśmy o tym, ale e-maile nie bardzo lubią obrazy w tle (głównym winowajcą jest program outlook) –

Fajnie, zaakceptuję to na razie, liczyłem na jakiś hack css, który zastąpi webkit domyślne css. –

Jeśli imgsrc nie jest obecny lub uszkodzony następnie skorzystać z poniższego kodu css

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

ten css ukryj obraz do imgsrc nie jest załadowany całkowicie .

Źródło

2015-10-28 09:26:23 Amit

Dzięki, ale jak wprowadzamy pseudo style? –

Odpowiedź Amita jest po prostu świetna, ale mała rada: użyj widoczność: ukryta; zamiast z wyświetlacz: brak;

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

więc można zaoszczędzić img rozmiar bloku i pozycjonowanie innych elementów. jej przydatne w większości przypadków, używam go na moich stronach ze zdjęciami lazyload i wyświetlają tylko pusty blok przed załadowaniem obrazu.

Źródło

2015-12-10 15:22:52 kabantejay

Dziękuję za to! To jest jedyna rzecz, która zadziałała dla mnie :) – Michael

Jest to świetne rozwiązanie, gdy używasz leniwego ładowania. –

-1

Możesz spróbować tego kodu, aby usunąć granice wokół uszkodzonych obrazów w pakiecie.

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

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

Źródło

2017-01-13 05:46:59

Jak usunąć granice wokół uszkodzonych obrazów w webkicie?

Odpowiedz

Powiązane problemy