我正在从Outlook发送一封HTML电子邮件到我的mail.live.com帐户。当我使用Firefox在mail.live.com上查看结果时,邮件看起来还可以,但是当我使用IE时,所有的内容都居中了。
我已经添加了大量的align=left
和内联CSS style='text-align:left'
来控制它,但它没有任何区别。
当我加载HTML文件直接到IE它是ok的;只有当从我的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>
其他用户的附加信息: 到目前为止,没有一个答案似乎有所帮助。我把我的顶层堆叠的表格居中,所有嵌套的表格在所有可能的元素上用
text-align:left;
向左对齐,它没有改变任何东西。
然后我在整个代码中删除了所有居中文本和表格的实例,它仍然在IE 9的所有web电子邮件客户端中呈现居中文本。有趣的是,如果我在ie9中从Gmail或雅虎发送电子邮件,它会正确呈现(无需添加所有额外的align/text-align左对齐)。然而,这封邮件必须来自Outlook,所以在这种情况下,这不是一个可行的解决方案。
尝试在HTML标记中添加head标记并结束该标记。也把你的样式放在你的标题标签中。我这样做了,并在IE Hotmail中尝试了一下,它对我很有效。
可能在你的html中有一个冲突的id/class,虽然这应该在所有浏览器中导致相同的效果。
不可能告诉你浏览器中正在发生什么。试着用浏览器的调试工具检查这些元素,这应该会告诉你它们被应用了什么样式,它们应该会显示文本对齐的来源。
在Internet Explorer中,调试工具的快捷键是F12,使用该窗口左上角的箭头可以专注于某些元素。
HTML电子邮件是一场噩梦,我已经建立了很多,很多,很多。当它在IE中呈现时,你检查过代码吗?
我发现Live/Hotmail即使根据IE的版本也会呈现不同的效果,更不用说其他浏览器了。
也,这可能听起来很无礼——但是你验证过代码了吗?
欢呼
尽管这听起来很烦人,但尝试在段落标记上添加内联text-align: left;
。
为了将来的参考,HTML电子邮件模板是一个伟大的基础,为那些可怕的HTML电子邮件项目。
我知道这个问题很老了,但是为了将来的参考,我确实注意到包含主文本的没有align="left"指定。即使它被嵌套在其他td中,但糟糕的IE不会继承这个设置。
<!-- Col 1/1 -->
<table id='' Style='border:0;text-align:left' align='left'>
<tr>
<td Id='LeftContentPanel' Width='460' [ALIGN="LEFT" NEEDED HERE]>
<h1>Insert heading here</h1>
电子邮件客户端的CSS支持非常糟糕。不幸的是,通过outlook发送可能会使情况更糟。你可能希望考虑使用mail chimp这样的服务,但我猜你可能已经想到了,通过outlook发送是项目的要求,所以这里有一些可能的选择(我理解你的痛苦,我不得不修复类似的事情)。
作为一个一般的经验法则来编码你的页面,就好像它是1999年一样,我发现campaign monitor资源是无价的。
这里有一个关于一般良好实践的方便指南:http://www.campaignmonitor.com/design-guidelines/
css支持的完整分解:http://www.campaignmonitor.com/design-guidelines/
和论坛是相当方便:http://www.campaignmonitor.com/forums/
别担心,我不是竞选班长!只是一些我发现有用的东西。你可以试着做一些事情:
也许你的文本在div中换行,并写上inline text-align:left。或者在p标签上
我猜外面的桌子是为了居中的设计?也许可以看看另一种技术来集中外部。
<body style="text-align:left;">
很有魅力。你不必把它写在整个邮件中