覆盖文本对齐：在 OWA 上对齐 - HTML 电子邮件答案

【问题标题】：Overriding text-align: justify on OWA - HTML emails覆盖文本对齐：在 OWA 上对齐 - HTML 电子邮件
【发布时间】：2014-03-04 16:16:22
【问题描述】：

我在使用 Outlook Web App (OWA) 时遇到问题。不用说，各种 Outlook 客户端存在许多问题，但 OWA 是我遇到的记录最少的客户端。

以下代码在所有客户端（Outlook 2000-2013、GMail、Yahoo、AOL）中都能完美运行，但在 OWA 中，文本始终设置为 text-align: justify，我无法覆盖它。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="left" width="208" valign="top">
      <div><multiline label=”Body”>
        Dummy text goes in here, blah blah blah. Man, I'm hungry.
      </multiline></div>
    </td>
  </tr>
</table>

到目前为止，我已经尝试过设置：

text-align: left
text-align: left !important
float: left
float: left !important

关于以下元素：

<table>
<td>
<div>
<span>
<multiline>
.left 和班级一样

另外，一个稍微不相关的注释，但是

<div><multiline label="Body"> content </multiline></div>

处理仅在 OWA 中出现的双行间距。

关于如何设置text-align: left的任何想法？

【问题讨论】：

你试过删除 DIV 吗？一般来说，不建议在 HTML 电子邮件中使用 DIV 等。您应该像 1998 年（或大约）那样进行编程。如果您删除 DIV 和/或多行，文本是否左对齐？
我同意比利的观点。删除 div 和 <td> 中的 align=left 应该可以工作。您可以在此处保留 Campaign Monitor 多行标签。我注意到您的多行标签中的引号类型不正确。远射，但这也可能产生影响。
@BillyMoat 问题是，当我删除 div 时，line-height 大约是两倍，这是我开始使用 div 的唯一原因。

标签： html css html-email outlook-web-app

【解决方案1】：

我在 OWA 中遇到了这个确切的问题，@John 从包装 <td> 单元格中删除 align="left" 的答案是要走的路。

我将我的文本包裹在一个<span> 标签中，这让我可以控制行高。希望对您有所帮助！

我的代码：

<td class="center respHead" valign="top" bgcolor="#FFFFFF" style="font-size:26px;line-height:30px;font-weight:bold;padding-left:20px;text-align:left !important">
    <span style="color:#010101;font-size:26px;line-height:30px;font-weight:bold">
       Previously Justified Content
    </span>
</td>

【讨论】：

【解决方案2】：

我遇到了完全相同的问题，今天我找到了解决方案。 :) 首先，您需要将所有文本强制向左，并为居中/右对齐的文本使用类。

CSS：

td {
    text-align: left !important; /* Set all text to left as default to overwrite OWA text-align justify */
}

td.center {
    text-align: center !important; /* text-align center for most email clients, OWA doesn't recognize this */
    text-align: center; /* OWA fix, overwrites left !important with this */
}

td.center * {
    text-align: center; /* Outlook 07,10,13 fix */
}

td.right {
    text-align: right !important; /* text-align right for all most email clients, OWA doesn't recognize this */
    text-align: right; /* OWA fix, overwrites left !important with this */
}

td.right * {
    text-align: right; /* Outlook 07,10,13 fix */
}

【讨论】：

刚刚试了一下，并没有调整对齐方式。