2013-09-18 2 views
0

HTMLHtml электронной проблемой для outlook.com и gmail.com

<!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" /> 
<title></title> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" height="931"> 
     <tr> 
      <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_01.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_02.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_03.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_04.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_05.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_06.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_07.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_08.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_09.png" alt="" style="display:block;" width="600" height="100" border="0" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/img_10.png" alt="" style="display:block;" width="600" height="31" border="0" /> 
      </a> 
     </td> 
    </tr> 
</table> 
</body> 
</html> 

Я посылаю HTML код электронной почты (как выше), но почта appers неправильно в gmail.com и outlook.com. Оба они добавляют тэг p вокруг тега тега и тега span вокруг тега img, как это;

<td> 
    <p class="some class name" 
    <a href="http://www.google.com" target="_blank"> 
     <span class="some class name"> 
     <img src="images/img_10.png" alt="" style="display:block;" width="600" height="31" border="0" /> 
     </span> 
    </a> 
    </p> 
</td> 

и так выглядит разрыв между тэгами. Как я могу это решить?

+0

Я не могу дублировать проблему. Если я отправлю это на адрес gmail, он не получит дополнительную разметку. Поэтому проблема должна лежать в другом месте (например, как вы ее отправляете). Кстати, содержимое письма не является полным HTML-файлом. И почтовые клиенты не делают XHTML. –

+0

[XHTML в порядке] (http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/), некоторые клиенты фактически конвертируют код в xhtml при его рендеринге , – John

ответ

1

Используйте style="margin: 0; border: 0; padding: 0; display: block;" для всех изображений.

Кроме того, добавление table td {border-collapse: collapse;} в тэг заголовка заголовка может помочь с Outlook.

Смежные вопросы