Alm*_*er9 3 outlook html-table alignment html-email
我刚刚遇到Outlook破坏我的HTML电子邮件时遇到的第一个挫折感.
我有一个640像素宽的容器表.在它是两个320px表,一个左对齐,一个右对齐.它们并排在除Word Engined Outlook(2007及更高版本)之外的所有电子邮件客户端中.
这是重要的部分.我有代码在手机上查看时使包含表变为320px宽.这会强制两个表一个在另一个之上.这完全按照计划用于移动设备.
但桌面上的Outlook会渲染左对齐的表格,然后在它下方呈现左侧下方的右侧表格,但仍然向右对齐,在左侧桌子下面创建一个大间隙,在右侧桌子上面形成一个大间隙.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
img[id="header"] {
width: 320px !important;
height: 69px !important;
}
img[id="main"] {
width: 320px !important;
height: 45px !important;
}
img[id="footer"] {
width: 320px !important;
height: 43px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
span[class="secondary"] {
line-height: 20px !important;
margin-bottom: 15px !important;
font-size: 13px !important;
}
}
</style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
<td bgcolor="#EEEEEE" width="100%">
<table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="640" class="cell" style="color:#FFF;">
<table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
<table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
<tr>
<td>
<a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
如果有人可以帮我找到一种方法在Outlook中仍然有我的两个并排表,但仍然让他们在手机中重新调整到另一个,我会非常感激.
小智 6
我发现你需要在表之间允许25px,以防止Outlook像这样堆叠它们.
另一种解决方案是使用Outlook的条件代码将每个表包装在包装器表的单元格中.这意味着在Outlook中,它们都将位于表的同一行,因此它们不可能崩溃.
<!--[if (gte mso 9)|(IE)]>
<table width="640" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<![endif]-->
(Left table goes here)
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="50%">
<![endif]-->
(Right table goes here)
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
在(gte mso 9)将针对Outlook 2000和向上的所有版本,但事实上Outlook 2000中,2002年和2003呈现使用IE浏览器,并不能识别的代码,这就是为什么你还可以使用(IE)在有条件的if语句.