HTML 电子邮件在 IE 中呈现文本居中
我正在从 Outlook 向我的 mail.live.com 帐户发送一封 HTML 电子邮件。当我使用 Firefox 查看 mail.live.com 中的结果时，电子邮件看起来不错，但当我使用 IE 时，所有内容都居中。
我添加了很多 align=left 和内联 CSS style='text-align:left' 来控制它，但它没有任何区别。
当我将 HTML 文件直接加载到 IE 中时就可以了；仅当从我的 Live/Hotmail 帐户查看时，它才会倾斜。
有人遇到过这个问题吗？
<html>
<body style='background:#333;font-family:arial;text-align:left;'>
<style>
#BlueStripe {
color:#000000;
background:#113399;
width:800px;
height:35px;
}
#Content {
width:800px;
}
#LeftContentPanel {
border:none;
padding:20px;
padding-top:5px;
}
#LeftContentPanel h1, h2, h3 {
color:#113399;
font-family:Arial,Verdana;
font-weight:normal;
margin-bottom:5px;
}
#LeftContentPanel p {
margin-top:5px;
}
h1, h2 {
font-weight:normal;
font-size:22px;
padding-bottom:0px;
}
#RightContentPanel {
width:220px;
padding:10px;
margin-top:10px;
margin-right:30px;
color:#fff;
font-weight:normal;
}
#RightContentPanel h1, h2 {
font-weight:normal;
font-size:20px;
margin-top:5px;
margin-bottom:-5px;
}
#RightContentPanel p {
font-weight:normal;
font-size:14px;
}
.edition {
text-align:left;
font-family:Arial,Verdana;
font-weight:normal;
font-size:16px;
color:#113399;
margin-left:10px;
margin-top:15px;
}
#FooterText {
color:#113399;
font-size:12px;
}
p {
text-align:left;
}
</style>
<table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'>
<tr>
<td>
<table border='0' Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'>
<tr Id='BlueStripe' Width='800'>
<td ColSpan='3'></td>
</tr>
<!-- Header -->
<tr id='LogoTitle' align='Left'>
<!-- Col 1/2 --> <td align='left'>
<img src='logo.jpg' alt='club logo' />
</td> <!-- Col 1 -->
<!-- Col 2/2 --> <td class='Panel2' ColSpan='2'>
<br />
<img src='title.jpg' alt='club news' />
<br />
<br />
<p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 -->
</tr>
<!-- Banner Image - Dumb Bells -->
<tr Id='BannerImage' Style='width:800px;'>
<!-- Col 1/1 -->
<td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0' align='Left'>
<img src='banner.jpg' alt='Dumb Bells' Width='800px' />
</td> <!-- Col 1 -->
</tr>
<tr Id='Content' align='Left'>
<!-- Col 1/1 -->
<td ColSpan='3'>
<br />
<table id='ContentPanel' Style='margin-top:10px'>
<tr align='Left'>
<td align='Left'>
<table id='' Style='border:0;text-align:left' align='left'>
<tr>
<td Id='LeftContentPanel' Width='460'>
<h1>Insert heading here</h1>
<p>
Vellant enes mo volupition eati amenima ximpor andis es mil mi,
optate cum in niatqui dellabo. Turiti quos debis demolen dustis
que peditat iorione quidignimin non con eaquatia nullore perit,
totat incimol orrum, coriassequo quia aut eos unt quia dolent
estemquodio odionseque esed que dolupta sperror sit quia que
pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem
quam rerum autem voluptiae atur?
</p>
<h1>Insert heading here</h1>
<p>
Feremos quisinte siment. Cium volorpo ressit re, omnisci as
autent as moluptas nonsece atquaessit eum dolut aut quis
nobisto quat aborem quis antempore, id moluptatur, sa que et
ea ium apis delignisi te si aut poribus ullaudae od quia conem
se verepud itatemporum ulparum re, volut velis eatis es accum
aut ratur, vende ius si doloriorum ent qui que velesciat que nam,
alitem ati a non remperorest restrum volentintem voluptatur am
rem eumqui quat et ea quiame quat.
</p>
<p>
Occatem poreium in rehentio eat el earia iur am, et laborio.
Itatur? Quiae estiorecese conseque niet estem as etusciur mos
ipsapid que videbit audit quid ut volupta sperias sequate ctotat
et et voluptis dellest, simus, secus aute quis iliquis si quia simus.
</p>
<div id='FooterText'>
more text here
</div>
</td>
</tr>
</table>
</td>
<td Width=5></td>
<td valign='top' align='left' style='padding:15px;text-align:left'>
<table Id='RightContentPanel' Style='text-align:left;' >
<tr style='padding:15px;text-align:left'>
<td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px; background-color:#113399;'>
<h1>Insert header here</h1>
<p align='left' style='text-align:left'>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
<tr>
<td height='35'>
</td>
</tr>
<tr>
<td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'>
<h1>Insert header here</h1>
<p>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> <!-- End Col 1 -->
</tr>
<tr>
<td Id='BlueStripe' ColSpan='3'></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Additional information from another user:
到目前为止，所有答案似乎都没有帮助。我将顶层堆叠表居中，并将所有嵌套表在所有可能的元素上使用 text-align:left; 向左对齐，并且它没有改变任何内容。
然后我删除了整个代码中居中文本和表格的所有实例，它仍然在 IE 9 中的所有网络电子邮件客户端中以居中文本呈现。有趣的是，如果我在 IE 9 中从 Gmail 或 Yahoo 发送电子邮件，它会正确呈现（无需添加所有额外的对齐/文本左对齐）。但是，此电子邮件必须来自 Outlook，因此在这种情况下这不是可行的解决方法。
I'm sending a HTML email from Outlook to my mail.live.com account. When I view the results in mail.live.com using Firefox the email looks ok, but when I use IE all the content is centered.
I have added lots of align=left and inline CSS style='text-align:left' to control it but it doesn't make any difference.
When I load the HTML file directly into IE it's ok; only when viewing from my Live/Hotmail account it is skewed.
Has anyone had this issue?
<html>
<body style='background:#333;font-family:arial;text-align:left;'>
<style>
#BlueStripe {
color:#000000;
background:#113399;
width:800px;
height:35px;
}
#Content {
width:800px;
}
#LeftContentPanel {
border:none;
padding:20px;
padding-top:5px;
}
#LeftContentPanel h1, h2, h3 {
color:#113399;
font-family:Arial,Verdana;
font-weight:normal;
margin-bottom:5px;
}
#LeftContentPanel p {
margin-top:5px;
}
h1, h2 {
font-weight:normal;
font-size:22px;
padding-bottom:0px;
}
#RightContentPanel {
width:220px;
padding:10px;
margin-top:10px;
margin-right:30px;
color:#fff;
font-weight:normal;
}
#RightContentPanel h1, h2 {
font-weight:normal;
font-size:20px;
margin-top:5px;
margin-bottom:-5px;
}
#RightContentPanel p {
font-weight:normal;
font-size:14px;
}
.edition {
text-align:left;
font-family:Arial,Verdana;
font-weight:normal;
font-size:16px;
color:#113399;
margin-left:10px;
margin-top:15px;
}
#FooterText {
color:#113399;
font-size:12px;
}
p {
text-align:left;
}
</style>
<table border='0' Id='PageWidth' Style='border:0px;width:800px;background:#fff;text-align:left;' cellpadding=0 cellspacing=0 align='center'>
<tr>
<td>
<table border='0' Style='border:0px;width:800px;' cellpadding=0 cellspacing=0 align='left'>
<tr Id='BlueStripe' Width='800'>
<td ColSpan='3'></td>
</tr>
<!-- Header -->
<tr id='LogoTitle' align='Left'>
<!-- Col 1/2 --> <td align='left'>
<img src='logo.jpg' alt='club logo' />
</td> <!-- Col 1 -->
<!-- Col 2/2 --> <td class='Panel2' ColSpan='2'>
<br />
<img src='title.jpg' alt='club news' />
<br />
<br />
<p class='edition' align='left'>Edition 9 – September 2011</p></td> <!-- Col 2 -->
</tr>
<!-- Banner Image - Dumb Bells -->
<tr Id='BannerImage' Style='width:800px;'>
<!-- Col 1/1 -->
<td ColSpan='3' Width='800px' Style='width:800px;text-align:left;' CellSpacing='0' CellPadding='0' align='Left'>
<img src='banner.jpg' alt='Dumb Bells' Width='800px' />
</td> <!-- Col 1 -->
</tr>
<tr Id='Content' align='Left'>
<!-- Col 1/1 -->
<td ColSpan='3'>
<br />
<table id='ContentPanel' Style='margin-top:10px'>
<tr align='Left'>
<td align='Left'>
<table id='' Style='border:0;text-align:left' align='left'>
<tr>
<td Id='LeftContentPanel' Width='460'>
<h1>Insert heading here</h1>
<p>
Vellant enes mo volupition eati amenima ximpor andis es mil mi,
optate cum in niatqui dellabo. Turiti quos debis demolen dustis
que peditat iorione quidignimin non con eaquatia nullore perit,
totat incimol orrum, coriassequo quia aut eos unt quia dolent
estemquodio odionseque esed que dolupta sperror sit quia que
pa dipsape llore, nitiis audi de nonse nisqui quia velit estem rem
quam rerum autem voluptiae atur?
</p>
<h1>Insert heading here</h1>
<p>
Feremos quisinte siment. Cium volorpo ressit re, omnisci as
autent as moluptas nonsece atquaessit eum dolut aut quis
nobisto quat aborem quis antempore, id moluptatur, sa que et
ea ium apis delignisi te si aut poribus ullaudae od quia conem
se verepud itatemporum ulparum re, volut velis eatis es accum
aut ratur, vende ius si doloriorum ent qui que velesciat que nam,
alitem ati a non remperorest restrum volentintem voluptatur am
rem eumqui quat et ea quiame quat.
</p>
<p>
Occatem poreium in rehentio eat el earia iur am, et laborio.
Itatur? Quiae estiorecese conseque niet estem as etusciur mos
ipsapid que videbit audit quid ut volupta sperias sequate ctotat
et et voluptis dellest, simus, secus aute quis iliquis si quia simus.
</p>
<div id='FooterText'>
more text here
</div>
</td>
</tr>
</table>
</td>
<td Width=5></td>
<td valign='top' align='left' style='padding:15px;text-align:left'>
<table Id='RightContentPanel' Style='text-align:left;' >
<tr style='padding:15px;text-align:left'>
<td style='margin-top:0px;padding:5px;padding:15px;text-align:left;padding-top:5px; background-color:#113399;'>
<h1>Insert header here</h1>
<p align='left' style='text-align:left'>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
<tr>
<td height='35'>
</td>
</tr>
<tr>
<td Style='margin-top:30px;padding-top:5px;padding:5px;padding:15px;text-align:left;background-color:#ff3333;'>
<h1>Insert header here</h1>
<p>
Vellant enes mo volupition eati
amenima ximpor andis es mil
mi, optate cum in niatqui de
llabo. Turiti quos debis demo
len dustis que peditat iorione
quidignimin non con eaquatia
nullore perit, totat incimol or
rum, coriassequo quia aut eos
unt quia dolent estemquodio.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td> <!-- End Col 1 -->
</tr>
<tr>
<td Id='BlueStripe' ColSpan='3'></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Additional information from another user:
None of the answers so far seem to help. I had my top level stacked tables centered and all the nested tables aligned left with text-align:left; on all possible elements and it didn't change anything.
Then I removed all instances of centered text and tables throughout the code and it STILL renders with centered text in all web email clients in IE 9. Interestingly, if I send the email from Gmail or Yahoo in IE 9, it renders properly (without having to add all the extra align/text-align lefts). However, this email must originate from Outlook, so that isn't a feasible workaround in this case.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
尝试放入 head 标签并结束 HTML 标签。还将您的样式放入标题标签中。我这样做了，并在 IE Hotmail 中尝试过，它对我有用。
Try putting a head tag in and end you HTML tag. Also put your style in your header tag. I did this and tried it in IE Hotmail and it worked for me.
您的 html 中可能存在冲突的 id/class，但这应该会在所有浏览器中产生相同的效果。
不可能告诉您浏览器中发生了什么。尝试使用浏览器调试工具检查元素，这应该告诉您对它们应用了哪些样式，并且它们应该揭示文本对齐的来源。
在 Internet Explorer 中，调试工具的快捷方式是 F12，使用该窗口左上角的箭头可以关注某些元素。
There is probably a conflicting id/class in your html though that should have resulted in the same effect in all browsers.
It is impossible to tell you what is going on in your browser. Try inspecting the elements with the browsers debugging tools, this should tell you what styles are being applied to them and they should reveal where the text-align is coming from.
In Internet Explorer the shortcut for the debugging tool is F12, use the arrow in the left top of that window to be able to focus on certain elements.
HTML 电子邮件是一场噩梦，我已经构建了很多很多。当代码在 IE 中呈现时，您检查过代码吗？
我发现 Live/Hotmail 的渲染效果甚至根据 IE 版本的不同而有所不同，更不用说其他浏览器了。
另外，这可能听起来很侮辱 - 但你验证过代码吗？
干杯
HTML emails are a nightmare, I have built many, many, many of them. Have you inspected the code when it renders in IE?
I found that Live/Hotmail renders differently even depending on the version of IE - let alone other browsers.
Also, and this will probably sound insulting - but have you validated the code?
Cheers
尽管这听起来很烦人，但请尝试在段落标签上添加内联
text-align: left;。为了供将来参考，HTML 电子邮件样板 是那些可怕的 HTML 电子邮件项目的良好基础。
As annoying as this sounds, try adding an inline
text-align: left;on the paragraph tags.For future reference, the HTML Email Boilerplate is a great base for those dreaded HTML email projects.
我知道这个问题已经很老了，但为了将来的参考，我确实注意到包含主要文本的内容没有指定align =“left”。即使它嵌套在其他执行align=:left"的TD中，糟糕的IE也不会继承该设置。
I know this question is old, but for future reference, I did notice that the containing the main text does not have align="left" specified. Even though it is nested within other TDs that DO align=:left", sucky IE won't inherit that setting.
电子邮件客户端中的 CSS 支持很糟糕。不幸的是，通过 Outlook 发送可能会让情况变得更糟。您可能希望考虑使用像邮件黑猩猩这样的服务，但我猜您可能已经想到了这一点，并且通过 Outlook 发送是该项目的要求，所以这里有一些可能的选择（我感受到您的痛苦，我必须解决类似的问题）。
作为一般经验法则，您的页面编码就像是 1999 年一样，我发现活动监控资源非常宝贵。
以下是有关一般良好实践的便捷指南：http://www.campaignmonitor.com/design-guidelines/
CSS 支持的完整分解：http://www.campaignmonitor.com/design-guidelines/
论坛也非常方便：http://www.campaignmonitor.com/forums/
别担心，我不为竞选监视器工作！只是我发现有用的东西。
您会想到一些可以尝试的事情：
也许将文本包装在 div 中并放置内联文本对齐：左对齐。或者也许在 p 标签上。
我猜外面的桌子是为了使设计居中？也许看看另一种将外部居中的技术。
CSS support in e-mail clients is terrible. Unfortunately sending via outlook will probably make it even worse. You may wish to consider using a service like mail chimp, but I'm guessing you've probably already thought of that and sending via outlook is a requirement of the project, so here are a few possible options (I feel your pain, I've had to fix similar things).
As a general rule of thumb code your pages as though it's 1999, I've found the campaign monitor resources invaluable.
Here is a handy guide on general good practices: http://www.campaignmonitor.com/design-guidelines/
A full break down of css support: http://www.campaignmonitor.com/design-guidelines/
And the forums are pretty handy: http://www.campaignmonitor.com/forums/
Don't worry I don't work for campaign monitor! Just things I've found useful.
A couple of things spring to mind that you could try:
Perhaps wrap your text in div's and put inline text-align:left. Or perhaps on the p tag.
I'm guessing the outer table is for centring the design? Perhaps look at an alternative techniques for centring the outer.
就像魅力一样。而且您不必将其放在整个电子邮件中。
Works like a charm. And you do not have to put it throughout the email.