HTML电子邮件列宽随电子邮件客户端的不同而变化
我找不到这个问题的直接答案,所以如果以前有人问过这个问题,请耐心等待 我的HTML经验有限。在我的Android手机上,在Entourage和Gmail中打开电子邮件时,电子邮件中表格列的宽度会发生变化。我电脑上的Gmail看起来不错,Outlook、雅虎等也不错 本质上,所发生的是Entourage/Gmail droid中左右列开关的宽度。左列宽应保持在HTML电子邮件列宽随电子邮件客户端的不同而变化,html,html-table,width,html-email,Html,Html Table,Width,Html Email,我找不到这个问题的直接答案,所以如果以前有人问过这个问题,请耐心等待 我的HTML经验有限。在我的Android手机上,在Entourage和Gmail中打开电子邮件时,电子邮件中表格列的宽度会发生变化。我电脑上的Gmail看起来不错,Outlook、雅虎等也不错 本质上,所发生的是Entourage/Gmail droid中左右列开关的宽度。左列宽应保持在width=“401”右列应保持固定在width=“171”(它们互换,因此左列为171,右列为401) 我正在使用一个HTML电子邮件模板
width=“401”代码>右列应保持固定在width=“171”
(它们互换,因此左列为171,右列为401)
我正在使用一个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=""
width="578" height="190"></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" width="401" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" width="19" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" width="171" valign="top"><p></p></td>
<tr>
</table>
</body>
html{
-webkit文本大小调整:无;
-webkit背景大小:100%;
}
.bold{
颜色:#61BB46;
}
梅因先生{
字体系列:Verdana、Helvetica、无衬线;
字体大小:12px;
线高:22px;
颜色:#666666;
}
.侧边栏{
字体系列:Verdana、Helvetica、无衬线;
字体大小:12px;
线高:22px;
颜色:#666666;
}
a:链接{
颜色:#592989;
}
a:参观了{
颜色:#FAAB53;
}
a:悬停{
颜色:#61BB46;
}
a:主动的{
颜色:#592989;
}
发送HTML电子邮件的第一条规则是使用内联样式。许多客户端将删除
标记中的任何样式。最安全的办法是,即使是
或
标签也不必费心,因为大多数时候这些标签都会被去掉。验证您的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>