HTML 电子邮件列宽随不同的电子邮件客户端而变化
Posted
技术标签:
【中文标题】HTML 电子邮件列宽随不同的电子邮件客户端而变化【英文标题】：HTML email column width changing with different email clients 【发布时间】：2012-09-07 18:01:44 【问题描述】：我找不到直接的答案，所以如果之前有人问过这个问题，请耐心等待。
我的 html 经验有限。在我的 android 手机上的 Entourage 和 Gmail 中打开时，电子邮件中表格列的宽度会发生变化。我 PC 上的 Gmail 看起来不错，Outlook、Yahoo 等也不错。
基本上发生的是 Entourage/Gmail-droid 中左右列开关的宽度。左列宽度应该保持在 width="401"; 右列应该保持固定在 width="171"（它们交换，所以左列是 171，右列是 401）。 p>
我正在使用我在网上找到的带有嵌套表格的 HTML 电子邮件模板。这是去除了文本和图像的基本代码。任何帮助将不胜感激：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
.bold
color: #61BB46;
.Main
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
.Sidebar
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
a:link
COLOR: #592989;
a:visited
COLOR: #FAAB53;
a:hover
COLOR: #61BB46;
a:active
COLOR: #592989;
</style>
<body bgcolor="#ffffff" text="#666666" style="padding:0px; margin:0px;">
<table style="font-family: Verdana, Helvetica, sans-serif; color: #666666;
font-size: 12px; Line-height: 18px; width: 600px;" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td style="font-size: 30px; line-height: 32px; color: #592989;" colspan="4">
<div style="font-size: 12px; color:#999;"></div></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 4px; background-color: #e3dede;"><img src=""
></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px; text-align: left;"
colspan="4"><p><a href="" target="_blank">
</td>
</tr>
<tr>
<td rowspan="5" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" valign="top"><p></p></td>
<tr>
</table>
</body>
【问题讨论】：
【参考方案1】：发送 HTML 电子邮件的第一条规则使用内联样式。许多客户会去掉<head> 标签中的任何样式。最安全的选择是甚至不用<head> 或<body> 标签，因为大多数时候这些标签都会被删除。验证您的 html。您有一些无效标记，许多客户会删除：
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
应该是：
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<table>
<tbody>
【讨论】：
以上是关于HTML 电子邮件列宽随不同的电子邮件客户端而变化的主要内容，如果未能解决你的问题，请参考以下文章
如何为不受支持的客户端将 HTML 电子邮件中的 GIF 替换为不同的图像
我的 HTML 电子邮件在 Yahoo Mail 中显示 Serif 而不是 Sans-serif