2012-08-09 55 views
14

Trong phiên bản dùng thử của Outlook 2013, hình ảnh trong email HTML đang được hiển thị rất kỳ quặc. Theo như tôi có thể tìm hiểu thông qua thử nghiệm, có vẻ như hình ảnh có chiều cao nhỏ hơn 20 pixel có phần đệm được thêm để làm cho chúng có chiều cao 20 pixel. Tôi có thể làm gì để thay đổi điều đó không? Những email này có vẻ tốt trong Outlook 2010 và ở mọi nơi khác mà tôi đã thử nghiệm chúng.Làm cách nào để sửa hình ảnh hiển thị trong Outlook 2013?

Tôi đã thử thay đổi chiều cao của ô trong bảng (đến height="13" cũng như css nội tuyến) cũng như bảng và hàng trong bảng, tất cả đều không có. Các mã sau đây là một ví dụ đơn giản của một cái gì đó mà gây nên vấn đề này, trong đó bạn sẽ có thể nhìn thấy nền đỏ của tế bào trên hình ảnh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td> 
    </tr> 
</table> 
</body> 
</html> 

bất cứ ai có thể giúp đỡ?

Trả lời

20

Thêm kiểu line-height vào thẻ td (và để đo tốt, hãy thêm thuộc tính height vào thẻ td).

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;"> 
     <img src="..." alt="" width="195" height="13" style="display:block;" /> 
    </td> 
    </tr> 
</table> 

Mã được sửa đổi được kiểm tra trong Litmus cho tất cả các phiên bản của Outlook.

+0

Tuyệt vời! Tuyệt vời! –

+0

Bạn là một Thiên Chúa trong số những người đàn ông. – GhostInTheSecureShell

+0

Cảm ơn bạn rất nhiều cảm ơn bạn thực sự thực sự – Nickool

0

Xóa ô đệm này bạn sẽ không thấy bg màu đỏ đó.

+0

Làm cách nào để thực hiện điều đó, ngoại trừ 'cellpadding = "0"' đã nằm trong thẻ bảng? –

-1

Thêm style="display:block;" vào bất kỳ thẻ hình ảnh nào. <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

Điều này sẽ loại bỏ phần đệm thừa đó.

0

Tôi thấy rằng việc thêm <font size="1"><img /></font> cũng hoạt động để khắc phục vấn đề.

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