Fatal编程技术网
  • html/
  • 电子邮件HTML签名在web客户端上添加空白HTML元素，导致布局中断

电子邮件HTML签名在web客户端上添加空白HTML元素，导致布局中断

html css

电子邮件HTML签名在web客户端上添加空白HTML元素，导致布局中断,html,css,html-email,email-client,email-templates,Html,Css,Html Email,Email Client,Email Templates,我已经试着解决这个问题好几个小时了，但我似乎找不到问题所在 我有这个HTML电子邮件签名，必须在低分辨率设备上正确包装 这是一个模型，说明了它在大屏幕设备上的外观： 这是一个模型，说明了它在小屏幕设备上的外观： 这是标记： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http

我已经试着解决这个问题好几个小时了，但我似乎找不到问题所在

我有这个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>
</head>

<body>
  <table width="100%">
   <tr>
    <td>

      <!-- TEXT CELL -->
      <table align=left width=160>
       <tr>
        <td>
          <p>
            <span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'>sep</span>
          </p>
        </td>
      </tr>
    </table>

    <!-- TEXT CELL -->
    <table align=left width=160>
     <tr>
      <td>
        <p>
          <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
          mso-fareast-font-family:"Times New Roman"'>ult</span>
        </p>
      </td>
    </tr>
  </table>

  <!-- TEXT CELL -->
  <table align=left width=160>
   <tr>
    <td>
      <p>
        <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
        mso-fareast-font-family:"Times New Roman"'>tur</span>
      </p>
    </td>
  </tr>
</table>

<!-- TEXT CELL -->
<table align=left width=160>
 <tr>
  <td>
    <p>
      <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
      mso-fareast-font-family:"Times New Roman"'>ura</span>
    </p>
  </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



九月



奥特



图尔



市建局
问题在于web客户端。出于某种原因，这4个表中的每一个表的旁边都附加了一个额外的HTML元素：

结果如下：

MS Outlook 2007（正确显示）：

苹果GMail客户端（正确显示和包装，因为它的屏幕分辨率很小）：

OutlookWeb（有一个额外的HTML元素打破了布局，细节在图片中）：

GMail网站（某种程度上类似于Outlook网站）：

我还想提一下，我用石蕊测试了这些，结果都很好。我不知道为什么在这些“现实世界”的情况下情况会有所不同

可能与我放置HTML签名的过程有关：

  • 打开包含签名的HTML页面
  • 选择该页面中的所有内容（ctrl+A）
  • 复制所有内容（ctrl+C）
  • 打开MS Outlook 2007
  • 转到工具->选项->邮件格式->签名
  • 新建签名->将内容粘贴到文本区域->保存新创建的签名
    • 您可以使用单个
    轻松完成该布局，并将这些项中的每一项设置为列，而不是使用4个单独的
    元素

    确保CSS都是内联的，并尽可能多地使用表格进行布局（HTML电子邮件是唯一可以接受此建议的时间）。此外，尽量只使用。请注意，Outlook.com实际上用自己的HTML替换了一些HTML，并采用任何内联CSS，并将其替换为一个类/id，它将该类/id放在转换的电子邮件顶部的样式表中（因此，
    .ExternalClass
    重置）

    另外，您可能需要查看，以解决Outlook.com等电子邮件提供商遇到的各种问题。

    我很有信心，在Outlook'07中，您所要求的不能通过签名完成

    这是因为Outlook'07/'10/'13使用Microsoft Word引擎并在发送后添加自己的垃圾邮件（p msoNormal标记）。因为它是在发送之后添加的，所以不能使用内联CSS。在html电子邮件设计中，设计师通常会在样式标记中添加样式，以消除这些不需要的标记，以期待Outlook完成它的工作。这对您不起作用，因为您仅使用签名。您可以尝试在签名html中包含
    标记，但我怀疑它是否有效

    我必须模仿这种行为的最佳建议是使用
    。非常黑客的方式，但如果从Outlook'07发送，它可能是“浮动”的唯一选项。例如：

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      Text&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
</table>

    
文本1
文本2
文本3
文本4
    像这样的东西可能也能工作（当然要整洁得多），但我还没有测试过：

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <span style="width:150px;">Text 1</span>
      <span style="width:150px;">Text 2</span>
      <span style="width:150px;">Text 3</span>
      <span style="width:150px;">Text 4</span>
    </td>
  </tr>
</table>

    
文本1
文本2
文本3
文本4
    “不要将文本包装在元素中，因为它们是块级元素”-这是错误的
    Div
    s是块级元素，不会破坏布局。你好，Alex W，谢谢你的回复。我已经试过你建议的解决办法，但情况并没有什么不同。即使我没有在s中包含这些段落，outlook仍会以某种方式在web客户端中生成它们。我不认为我能操纵它。我还从DOM中手动删除了它们（使用开发人员工具），但没有任何改进。破坏布局的内容与在每个段落之后插入的额外段落有关（显示在屏幕截图中）。我如何防止它们插入？@Zubzob尝试使用我在编辑中提到的Mailchimp重置，看看您是否仍然遇到问题。谢谢，这一次接近解决我的问题。有趣的是，如果我尝试在每个跨度内添加一个小图像（文本旁边的图标），Outlook将再次启动，并将所有内容彼此相邻，例如..，导致低分辨率设备将文本（每行）与其对应的图像分开。这太令人沮丧了。你在使用
    display:block在你的图像上？在这种情况下，您必须删除它。这就是我正在做的：但结果如下：（尝试调整输出窗格的大小以正确查看问题）@Zubzob这是相同的链接两次。此外，它在不同的浏览器上的行为也不同，因此您需要解释发生了什么（除非您要链接的图像发生了），它可能看起来是同一个链接，但它是不同的。我已经用一些未断开的链接更新了标签。尝试重新调整输出窗格的大小，查看文本和图像如何在第二个链接中换行。第一个链接是期望的行为，但遗憾的是Outlook将其转换为类似于第二个链接的内容：（。问题在于，在低屏幕设备上，我可能会将第二个图像与第一个文本放在同一行，而不是其对应文本的旁边（第二个）。