【问题标题】:Outlook.com put extra p around my spacesOutlook.com 在我的空间周围放置了额外的 p
【发布时间】:2013-08-25 03:05:14
【问题描述】:

我正在设计电子邮件模板。在一些文本之间,我需要放置换行符。到目前为止,除了 outlook.com(在浏览器上)之外,大多数客户端都很好。它将我的<br> 包裹在一个<p> 中,默认情况下它有很大的边距。

我尝试将<br><td> 与空格一起使用,<td><span> 和内部空间以及<td><p>margin:0 和内部空间一起使用。每次我将我的 html 包裹在 <p> 中。

为什么它将我的 html 包装在 <p> 中??

【问题讨论】:

    标签: html-email email-client


    【解决方案1】:

    Outlook 将所有内容包装在 <p> 标记中的原因是因为它使用 MS Word 引擎来呈现 html 而不是基于浏览器的呈现器。

    p 标签是不可避免的,上面的建议是将不需要的边距“归零”的好方法。 Outlook 不会去除 <style> 标记,但某些 MS Exchange 服务器会(出于安全考虑),因此如果您发现 Outlook 中忽略了您的样式标记,请尝试发送到不同的域电子邮件地址(尤其是非公司电子邮件地址)你应该会发现它会按预期工作。

    我还建议不要在电子邮件中使用<p> 标签,并在段落之间使用双<br> 标签,在表格单元格中使用 <br><br>  进行顶部和底部“填充”。

    【讨论】:

      【解决方案2】:

      我从未发现.ExternalClass hack 有任何用处。 Outlook.com 通常对 line-height<p> 标记作为一个整体非常不确定,所以我发现最好的办法是从我的电子邮件中删除所有 <p> 标记,然后将所有文本部分放在 @ <td> 内的 987654325@ 标签。

      我进行了一个快速的试金石测试,但无法使用<br><br/> 重现您的结果,但是您可以在<td> 中嵌套一个表格,不要定义高度,并使用多个该表中的行以模拟中断。我发现它不符合我通常的行高节奏。

      【讨论】:

      • 仔细阅读EmailOnAcid关于该问题的文章后,我发现他们的方法是安全的。您将整个电子邮件正文内容(在您的正文标签内)包装在 <div class="ExternalClass"> 中,然后将 .ExternalClass * {line-height: 100%} 添加到您的样式标签中。
      • 上述内容无法在 gmail 中正确呈现,因为标题标签已被剥离
      • gmail 不需要它,这是一个 outlook.com 修复程序。除了 gmail
      【解决方案3】:

      Outlook 无法正确呈现 html 电子邮件。

      有一个小技巧可以帮助你:

      <style type="text/css">
      
      .ExternalClass p (Or whatever, you can target pretty much anything here)
      {line-height: 50%; margin:0;} 
      
      </style>
      

      这将与 Outlook 的本机样式表对话并对其进行调整,因为 Outlook 将 .ExternalClass 类应用于您的电子邮件。

      以下是有关该主题的一些重要信息:http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

      许多人会说 html 电子邮件中的所有样式都必须是内联的。这在一定程度上是正确的,因为一些客户会从您的电子邮件中删除头部和身体标签。但对于那些不喜欢 Outlook 的人来说,这是一个宝贵的工作空间。

      希望这会有所帮助。

      【讨论】:

      • 我添加了它,但听起来 Outlook 剥离了我的样式标签
      猜你喜欢
      • 1970-01-01
      • 2013-08-21
      • 1970-01-01
      • 1970-01-01
      • 2018-02-18
      • 2014-08-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多