我正在从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>
<小时/> 来自其他用户的其他信息:
到目前为止,答案似乎都没有帮助。我将顶层堆叠表放在中心位置,并且所有嵌套表在所有可能的元素上都与text-align:left;
左对齐,并且没有任何改变。
然后我在整个代码中删除了所有居中文本和表格的实例,并且它仍然在IE 9中的所有Web电子邮件客户端中以居中文本呈现。有趣的是,如果我从IE 9中的Gmail或Yahoo发送电子邮件,它会正确呈现(无需添加所有额外的对齐/文本对齐左侧)。但是,此电子邮件必须源自Outlook,因此在这种情况下这不是一个可行的解决方法。
答案 0 :(得分:6)
尝试将head标记放入并结束HTML标记。还要将您的样式放在标题标记中。我这样做并在IE Hotmail中尝试过,它对我有用。
答案 1 :(得分:4)
你的html中可能存在冲突的id / class,但这应该会在所有浏览器中产生相同的效果。
无法告诉您浏览器中发生了什么。尝试使用浏览器调试工具检查元素,这应该告诉您应用了哪些样式,它们应该显示text-align的来源。
在Internet Explorer中,调试工具的快捷方式是F12,使用该窗口左上角的箭头可以专注于某些元素。
答案 2 :(得分:4)
HTML电子邮件是一场噩梦,我已经构建了很多很多很多。您在IE中呈现代码时是否检查过代码?
我发现Live / Hotmail的呈现方式甚至取决于IE的版本 - 更不用说其他浏览器了。
此外,这可能听起来有些侮辱 - 但你验证了代码吗?
干杯
答案 3 :(得分:3)
听起来很烦人,请尝试在段落标记上添加内联text-align: left;
。
为了将来参考,HTML Email Boilerplate是那些可怕的HTML电子邮件项目的理想基础。
答案 4 :(得分:3)
我知道这个问题已经过时了,但是为了将来的参考,我确实注意到包含主文本没有指定align =“left”。即使它嵌套在DO align =:left“的其他TD中,sucky 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>
答案 5 :(得分:1)
电子邮件客户端的CSS支持非常糟糕。不幸的是,通过outlook发送可能会让情况变得更糟。您可能希望考虑使用像邮件黑猩猩这样的服务,但我猜你可能已经想过这个并且通过outlook发送是该项目的要求,所以这里有一些可能的选择(我感觉到你的痛苦,我我必须修复类似的事情。
作为一般的经验法则,您的网页就像1999年一样,我发现广告系列监控资源非常宝贵。
以下是关于一般良好做法的便利指南:http://www.campaignmonitor.com/design-guidelines/
完全分解css支持:http://www.campaignmonitor.com/design-guidelines/
论坛非常方便:http://www.campaignmonitor.com/forums/
不要担心我不参加广告系列监控!我发现有用的东西。
有些事情让人想起你可以尝试:
也许将文本包装在div中并将内联text-align:left。或者也许在p标签上。
我猜测外表是用于设计的中心?也许看一下以外部为中心的替代技术。
答案 6 :(得分:0)
<body style="text-align:left;">
像魅力一样工作。而且你不必把它放在电子邮件中。