HTML在某些電子郵件客戶端中無法正確顯示

我已經收到了在電子郵件中發送的HTML，但一些接收者在其電子郵件客戶端遇到問題（我懷疑Outlook）。HTML在某些電子郵件客戶端中無法正確顯示

我已經檢查並重新檢查了這個HTML代碼，但我找不到一些元素不在正確位置的原因，所以我可以使用一些幫助。

我突出了「錯誤」暗紅色線條：

buggy mail

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>'.$mail['subject'].'</title> 
</head> 

<body> 
<table style="border: 0; border-spacing: 0; line-height: 0; margin: 0; padding: 0; width: 559px;"> 
    <tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><img src="'.$root.$cards['path']['mail'].'0-0-'.$mail['card'].'.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td style="border: 0; margin: 0; padding: 0; width: 120px;"><img src="'.$root.$cards['path']['mail'].'1-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td rowspan="2" style="border: 0; margin: 0; padding: 0; vertical-align: top; width: 210px"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; margin: 0; padding: 0; word-wrap: break-word; width: 210px;">'.$mail['message'].'<br /><br />'.$mail['from_name'].'</p></td> 
     <td colspan="3" style="border: 0; margin: 0; padding: 0; width: 269px;"><img src="'.$root.$cards['path']['mail'].'1-2.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td style="border: 0; margin: 0; padding: 0; width: 120px;"><img src="'.$root.$cards['path']['mail'].'2-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td style="border: 0; margin: 0; padding: 0; width: 65px;"><img src="'.$root.$cards['path']['mail'].'/2-2.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td style="border: 0; margin: 0; padding: 0; vertical-align: top; width: 170px;"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; line-height: 12px; padding: 0; width: 170px;">'.$mail['to_name'].'</p></td> 
     <td style="border: 0; margin: 0; padding: 0; width: 34px;"><img src="'.$root.$cards['path']['mail'].'2-4.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><img src="'.$root.$cards['path']['mail'].'3-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; margin: 0; padding: 0; word-wrap: break-word; width: 210px;"><a href="http://www.geschiedeniszeeland.nl" target="_blank"><img src="'.$root.'images/site-button.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></a></p></td> 
    </tr> 
</table> 
</body> 
</html>

不要在HTML擔心PHP的位，因爲工作像一個魅力。

來源

2012-03-21 Tim S.

無論問題是什麼，它都會變得微妙。如果我們正在查看HTML而不是PHP代碼，將會更容易。 – dldnh 2012-03-21 09:46:07

首先，無論何時使用img標籤，您都必須使用style =「display：block」 - 這是爲了避免圖像下面的1px白線。

其次，在tabel而不是collspan/rowspan中使用tabel會更好。

我也可以看到你有一個559pw的tabel，但你的第3行是：120 + 65 + 170 + 34 = 389 px，而且你也錯過了一列。

來源

2012-03-21 10:24:08 Caelea

我已經更改了圖像以阻止並修復了您提到的行寬。源代碼將返回給想要自己上傳的客戶（天知道爲什麼），所以我只需要等待。如果確實解決了這個問題，我會非常高興。提前致謝！ – 2012-03-23 11:48:16

HTML在某些電子郵件客戶端中無法正確顯示

回答

相關問題