Alo*_*ain 15 email-client hotmail html-email outlook.com
我创建了一个非常简单的html电子邮件. http://staging.xhtml-lab.com/mailtest/
它在所有电子邮件客户端都运行正常,但hotmail.com/outlook.com除外
在Hotmail电子邮件中保持对齐,它应保持居中对齐.
我已经按照emailology.org的建议添加了以下代码,但它没有任何效果.
<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>
有什么建议我可以做些什么来使电子邮件中心一致？
Mag*_*eit 36
这应该给你一个集中的电子邮件:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
该center-tag就是由Outlook和outlook.com需要.其他客户端使用该margin属性.在某些客户端中,文本在center-tag 之后居中,因此该text-align属性是必需的.
如果您希望宽度根据屏幕大小而变化,请使用以下代码:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<!--[if mso]>
<table style="width: 640px;"><tr><td>
<![endif]-->
<div style="max-width: 800px; margin: 0 auto;">
<table style="background: blue; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</div>
</center>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
Outlook不支持max-width,因此Outlook 的大小固定为640px.对于所有其他客户端,电子邮件的宽度将与查看窗口的宽度相同,但最大为800px.
如果您发现这些解决方案不起作用的客户端,请告诉我们,以便我们找到一个尽可能多的客户端解决方案.
这是我构建的一个，我将其用作所有电子邮件的起点。它在所有主要电子邮件客户端上 100% 运行：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->
content...
<!-- /CENTER BG COLOR -->
</td></tr></table>
<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
它有一个内置的白色背景，供有人转发电子邮件时使用（他们可以在白色上打字，而 html 设计部分的背景保持彩色）。主面板还设置了背景颜色，因为 Outlook 在转发时会在表格之间放置间隙。
希望有帮助。
| 归档时间： |
|
| 查看次数： |
32916 次 |
| 最近记录： |