Question

这些可能是一些愚蠢的问题/错误，但我真的对html电子邮件嗤之以鼻，我就在我的系绳的尽头，所以我想知道我是否可以把这个过去。

我很难显示我创建的电子邮件。主要攻击者是Outlook 2010，其中存在以下错误（我已将其标记为文本） -

“TITLE TEXT HERE”和“MORE HERE”被强行放在徽标下方的一行 - “images / my_logo_1.jpg”

顶部横幅“images / img_row_1.jpg”应与其下方的内容和文字的宽度相同，但它更窄。

包含“那一个”的表应该与正在进行的图像和文本并排放置，但不断被强制插入2行。我减小了宽度，但现在它没有与它上面和下面的元素对齐。

包含“this one”的表也被强制转换为新行。

此外，以下评论中包含的区域显示为2行，而不是显示在任何其他电子邮件客户端/浏览器中的1，例如，

<!-- Start of seperator -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
   <tbody>
      <tr>
         <td>
            <table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth">
               <tbody>
                  <tr>
                     <td align="center" height="60" style="font-size:10px; line-height:1px;"><p style="background:none; border:solid 1px #d2d2d2; border-width:1px 0 0 0; height:1px; width:93%; margin:0px 0px 0px 0px; padding-top:10px;">&nbsp;</p></td>

                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- End of seperator -->

修改

Here's a link instead, with the full code.

Answer 1

Outlook在彼此相邻时为表添加一个小缓冲区 - 这就是推动下面的最后一个，因为没有足够的空间。快速解决方法是使表格的宽度减小几个像素。

然而，正确的方法是将它们放在<td>内。

基本示例：

<!-- You are doing this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <table bgcolor="#777777" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 1
          </td>
        </tr>
      </table>

      <table bgcolor="#999999" width="300" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            table 2
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

<br><br>

<!-- Instead do this -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <!-- nest a full width table with 2 cells -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="300">

            <table bgcolor="#777777" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 1
                </td>
              </tr>
            </table>

          </td>
          <td width="300">

            <table bgcolor="#999999" width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  table 2
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Outlook 2010中的电子邮件新闻稿呈现问题

1 个答案: