HTML 电子邮件：居中对齐表格会影响 Internet Explorer 中的单元格文本

Question

在查看 HTML 电子邮件时，我注意到 Internet Explorer 存在“错误”或其他问题。我正在使用版本 11，它仍然存在。

如果我想在页面中心对齐表格，它也会导致任何 <td> 单元格中的文本居中，即使我将属性设置为 align="left" 并使用内联 CSS 指定 @ 987654324@

这是一些示例代码（尝试将其作为 HTML 电子邮件发送到您的 yahoo 或 gmail 帐户并在 IE 中查看）：

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
  <tr>
    <td>
    <table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
  <tr>
    <td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
  </tr>
</table>
    </td>
  </tr>
</table>

您应该看到文本将居中对齐而不是左对齐。此“错误”仅在以 HTML 电子邮件形式查看代码时出现。如果您将其视为网页，则可以正常工作！

我已经使用 Outlook 和 Yahoo 的 web 版本以及不同的在线邮件帐户对其进行了测试，问题仅在 IE 中是相同的。我在 Chrome、Firefox 和 Android 的内置浏览器中试了一下，效果很好。

除了不让我的表格在页面中间居中之外，我不知道如何解决它。将我的电子邮件内容放在页面左侧看起来也不美观。

Answer 1

不要在父表标签中使用align="center"，而是尝试将它放在父表标签<td> 中。还要丢失子表标签上的align="center"，并且不需要CSS text-align：

<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
            Your text here...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>