Question

我正在开发查找职位门户网站，在该门户网站中，我通过电子邮件发送工作提醒。

现在我用HTML编写邮件，当我收到警报邮件时，它在不同的电子邮件客户端中看起来有所不同。

它在gmail中看起来很合适，但在Outlook，雅虎Mozilla等中却没有。

我的HTML代码：

    <tr>                                             <td>
<table width="97%" cellspacing="0" cellpadding="0" border="0" style="margin:15px 10px;table-layout:fixed;">
<tr>
<td width="450px" style="overflow: hidden;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">                                                  
  <tr>
  <td>
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
  <td class="job-position" style="color:#000000; font-family:\'Myriad Pro\',Verdana,Arial; font-size:14px; line-height:20px; text-align:left" width="163">
  <a href="'.$link.'" target="_blank">
  '.$job['title'].'
  </a>
  </td>
  </tr>
  <tr>
  <td class="job-position" style="color:#000000; font-family:\'Myriad Pro\',Verdana,Arial; font-size:14px; line-height:20px; text-align:left" width="163">
  '.$comp.'         
  </td>
  </tr>
  </table>  
  <div style="font-size:0pt; line-height:0pt; height:5px">
  <img src="'.BASE_URL.'/sites/default/files/images/empty.gif" width="1" height="5" style="height:5px" alt="" />
</div>                                          </td>
</tr>
<tr>
<td class="job-category" style="color:#666666; font-family:\'Myriad Pro\',Verdana,Arial; font-size:13px; line-height:17px; text-align:left">
'.$job["field_city_value"].', '.$stateCode.' / '.$emp.' / '.$bev.' / '.$ind.' 
</td>
</tr>
<tr>
<td>            
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="'.BASE_URL.'/sites/default/files/images/empty.gif" width="1" height="10" style="height:10px" alt="" />
</div>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
 <!--                                           <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="105">
<a href="'.$link.'" target="_blank">
                                                                                            <img src="'.BASE_URL.'/sites/default/files/images/view_job.jpg" width="100" height="30" border="0" alt="" />
</a>
</td>
-->                                         </tr>
</table>
</td>
</tr>                                                
</table>
<!--start-->
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left;" width="80">
<a href="#" target="_blank">
<img src="'.$logourl.'" width="59" height="50" border="0" alt="" />
</a>
</td>
<!--end-->
</td> 
<td class="job-category" style="color:#666666; font-family:\'Myriad Pro\',Verdana,Arial; font-size:13px; line-height:17px; text-align:left">
'.$jobDate.'
</td>
</tr>
</table>
</td>    
</tr>

此代码应为所有电子邮件客户端生成相同的输出，但不会显示所有电子邮件客户端。

我在谷歌搜索过这个问题，但没有任何特定的解决方案。

所以我的问题是，在每个电子邮件客户端上，哪些代码会使电子邮件看起来相同？

Answer 1

在Campaingn Monitor制作的电子邮件中查看本css支持指南： http://www.campaignmonitor.com/css/

我的导游：

不要使用课程
使用表格进行布局
不要将列嵌套
避免空白
不要缩短样式（如＃000）

再看看： http://www.campaignmonitor.com/resources/will-it-work/guidelines/

Answer 2

也许他们有自己的CSS。 Yahoo css，Gmail css ...用于邮件内容。例如，yahoo mail css中的html标记table为border = 1，但在Gmail中定义为= 2。我想是的。

Answer 3

尝试用CSS替换HTML属性。大多数电子邮件客户端都更新为HTML5。请查看此列表：http://wiki.whatwg.org/wiki/Presentational_elements_and_attributes

例如：带有style =“padding：..”的cellpadding; cellspacing with style =“border-spacing”，width =“100％”with style =“width：100％”。

另一个提示...在http://validator.w3.org/#validate_by_input上获取您的代码并将其过去，点击“更多选项”并选择“验证完整文档” - ＆gt;使用Doctype - ＆gt; HTML5实验。

我检查了你的代码......我在你的代码中发现了一个错误（也许这就是为什么在所有的电子邮件客户端看起来都不正确）：Stray end tag td。你在这部分代码之后立即关闭了一个：

<!--start-->
  <td class="img" style="font-size:0pt; line-height:0pt; text-align:left; width:80px" ><a href="#" target="_blank"> <img src="'.$logourl.'" width="59" height="50" style="border:0" alt="" /> </a></td>
<!--end-->

**</td>**

此外，你打开了一个，你评论了它的内部。在HTML5中，创建一个并让它不管它也是一个错误。我也批评了这些标签。这是新代码。检查一下：

<table style="width:97%; padding:0; border:0; border-spacing:0; margin:15px 10px;table-layout:fixed;">
  <tr>
    <td style="overflow: hidden; width:450px"><table style="width:100%; padding:0; border:0; border-spacing:0">
        <tr>
          <td><table style="width:100%; padding:0; border:0; border-spacing:0">
              <tr>
                <td class="job-position" style="color:#000000; font-family:\'Myriad Pro\',Verdana,Arial; font-size:14px; line-height:20px; text-align:left; width:164px"><a href="'.$link.'" target="_blank"> '.$job['title'].' </a></td>
              </tr>
              <tr>
                <td class="job-position" style="color:#000000; font-family:\'Myriad Pro\',Verdana,Arial; font-size:14px; line-height:20px; text-align:left; width:163px"> '.$comp.' </td>
              </tr>
            </table>
            <div style="font-size:0pt; line-height:0pt; height:5px"> <img src="'.BASE_URL.'/sites/default/files/images/empty.gif" width="1" height="5" style="height:5px" alt="" /> </div></td>
        </tr>
        <tr>
          <td class="job-category" style="color:#666666; font-family:\'Myriad Pro\',Verdana,Arial; font-size:13px; line-height:17px; text-align:left"> '.$job["field_city_value"].', '.$stateCode.' / '.$emp.' / '.$bev.' / '.$ind.' </td>
        </tr>
        <tr>
          <td><div style="font-size:0pt; line-height:0pt; height:10px"> <img src="'.BASE_URL.'/sites/default/files/images/empty.gif" width="1" height="10" style="height:10px" alt="" /> </div>
            <table style="width:100%; padding:0; border-spacing:0; border:0">
              <!-- <tr>
                <td class="img" style="font-size:0pt; line-height:0pt; text-align:left; width:105px"><a href="'.$link.'" target="_blank"> <img src="'.BASE_URL.'/sites/default/files/images/view_job.jpg" width="100" height="30" style="border:0" alt="" /> </a></td>
              </tr> -->
            </table></td>
        </tr>
      </table>

      <!--start-->
    <td class="img" style="font-size:0pt; line-height:0pt; text-align:left; width:80px" ><a href="#" target="_blank"> <img src="'.$logourl.'" width="59" height="50" style="border:0" alt="" /> </a></td>
    <!--end-->

    <td class="job-category" style="color:#666666; font-family:\'Myriad Pro\',Verdana,Arial; font-size:13px; line-height:17px; text-align:left"> '.$jobDate.' </td>
  </tr>
</table>

为什么用HTML编写的邮件在outlook，Yahoo＆amp; Gmail吗？

3 个答案: