HTML电子邮件：中心对齐表会影响Internet Explorer中的单元格文本 [英] HTML Emails: Center aligning tables affects cell text in Internet Explorer

问题描述

在查看HTML电子邮件时，我注意到了一个'错误'或任何与Internet Explorer有关的问题。我使用的是版本11，它仍然存在。

I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.

如果我想在表格中间对齐表格，它也会导致任何< td> 单元格居中，即使我将属性设置为 align =left，并使用内联CSS指定 text-align =left。

If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".

以下是一些示例代码您的雅虎或Gmail帐户，并在IE浏览器中查看它）：

Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in 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电子邮件的形式查看代码时才会出现此错误。如果您将它视为网页，那么它可以正常工作！

You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!

我已经使用Outlook和Yahoo的Web版本以及不同的在线邮件帐户进行了测试，问题是只有在IE中才是一样的。我在Chrome，Firefox和Android的内置浏览器中尝试了它，并且工作正常。

I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.

我不明白如何修复它，除非不让我的表居中在页面中间。我的电子邮件内容在页面左侧看起来并不美观。

I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.

推荐答案

不是使用 align =center，可以尝试将它放在父元素< td> 中。另外，您的子表标记也会丢失 align =center，而且您不需要CSS text-align：

Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need 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>

这篇关于HTML电子邮件：中心对齐表会影响Internet Explorer中的单元格文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！