Làm cách nào để xóa đường viền xung quanh hình ảnh bị hỏng trong webkit?

Ai có thể tư vấn cho tôi về điều này không? Trình duyệt WebKit tiếp tục đặt đường viền 1px màu xám xung quanh hình ảnh bị tắt. Lý do tôi cần xóa này là để tối ưu hóa email khi ứng dụng email bị tắt hình ảnh. Hoạt động tốt trong Firefox, nhưng trình duyệt WebKit tiếp tục hiển thị đường viền.Làm cách nào để xóa đường viền xung quanh hình ảnh bị hỏng trong webkit?

Tôi đã thử border:none !important ở mọi nơi kể cả nội tuyến, nhưng Chrome/Safari đang bướng bỉnh.

Edit: Đây là html mẫu với 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" />

Nguồn

2012-10-31 Van Nguyen

được sử dụng để -webkit-border: 0; –

Bạn có nghĩa là một cái gì đó như: bảng, img {-webkit-border: 0! Important;}? Vẫn không làm việc. –

u có thể hiển thị mã html hoặc css của bạn –

Không có cách nào để xóa nó nhưng tôi đã bao bọc hình ảnh trong phần tử có thuộc tính bị ẩn tràn trong các kiểu của nó.

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

Hãy nhìn vào thùng này http://jsbin.com/OpAyAZa/1/edit

Nguồn

2013-11-27 07:46:31

Đẹp nhất, hãy để tôi kiểm tra nó trên các ứng dụng email –

Hãy thử sử dụng một số hoạt Javascript để loại bỏ các hình ảnh bị hỏng. Đó là cách duy nhất

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

Do hiển thị hình ảnh bị hỏng khác với trình duyệt và trình duyệt không thể thay đổi.

Tái bút: onerror sẽ cháy khi hình ảnh không được tải

Nguồn

2012-10-31 04:47:45 naveen

Cảm ơn, nhưng điều này là dành cho email để javascript không có sẵn. –

sau đó thử giải pháp hilsons. Có một ý tưởng hay hơn là – naveen

trình duyệt dường như không thực sự cung cấp cho bạn một cách để loại bỏ biên giới đó. Giải pháp đơn giản nhất của bạn là thay đổi img thành div và áp dụng hình ảnh làm nền.

Bằng cách đó, nếu không có src, bạn sẽ không nhận được biểu tượng và đường viền hình ảnh bị hỏng.

Cập nhật: Microsoft Outlook làm cho những điều khó khăn, và chữa bệnh là gần như tồi tệ hơn bệnh: ngôn ngữ đánh dấu vector, các yếu tố hình dạng, các yếu tố imageData, vv Nếu bạn google xung quanh bạn sẽ thấy làm thế nào để sử dụng chúng http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

Người dùng Outlook có thể chỉ phải đi mà không có hình ảnh để bạn có thể gọi nó một ngày.

Nguồn

2012-10-31 04:49:27

Có ý nghĩ về điều này, nhưng email không thực sự thích hình ảnh nền (triển vọng là thủ phạm chính cho việc này) –

Thật tuyệt, tôi sẽ chấp nhận điều này, hy vọng một số loại css hack sẽ ghi đè lên webkit mặc định css. –

Nếu imgsrc là không có mặt hoặc bị hỏng sau đó sử dụng dưới đây css đang

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

css này ẩn hình ảnh đến imgsrc không được tải hoàn toàn .

Nguồn

2015-10-28 09:26:23 Amit

Cảm ơn, nhưng làm thế nào để chúng tôi nội tuyến phong cách giả? –

Câu trả lời của Amit thật tuyệt, nhưng một lời khuyên nhỏ: sử dụng khả năng hiển thị: bị ẩn; thay vì hiển thị : không có;

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

vì vậy bạn có thể tiết kiệm kích thước khối img và vị trí của các nguyên tố khác. hữu ích của nó trong hầu hết các trường hợp, tôi sử dụng nó trên các trang web của tôi với hình ảnh lazyload và chỉ hiển thị khối trống trước khi tải hình ảnh.

Nguồn

2015-12-10 15:22:52 kabantejay

Cảm ơn bạn vì điều này! Đây là điều duy nhất làm việc cho tôi :) – Michael

Đây là một giải pháp tuyệt vời khi sử dụng tải chậm. –

-1

Bạn có thể thử mã này để xóa đường viền xung quanh hình ảnh bị hỏng trong webkit.

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

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

Nguồn

2017-01-13 05:46:59

Làm cách nào để xóa đường viền xung quanh hình ảnh bị hỏng trong webkit?

Trả lời

Các vấn đề liên quan