我想创建一个简单的电子邮件模板,它的正常工作在大多数的平台除了在Windows7中非常有名的前景。它应该是这样的形象
但它看起来像在Outlook(2003,07,13)在Windows 7/10。
我曾尝试阅读大量的材料和遵循的规则。但在Outlook中似乎没有任何合作。我的表的内容是Outlook靠左对齐和图像之间有很大的空间。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="telephone=no" name="format-detection">
<meta content="date=no" name="format-detection">
<meta content="address=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="link=no" name="format-detection">
<meta name="x-apple-disable-message-reformatting">
<style>
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
img {
max-width: 100%;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
table.body-wrap { width: 100%;}
p {
font-weight: normal;
font-size:14px;
line-height:1.6;
}
.container {
display:block!important;
max-width:600px!important;
margin:0 auto!important;
clear:both!important;
}
.content {
padding:0px 15px;
max-width:600px;
margin:0 auto;
display:block;
}
.content table { width:100%; }
@media screen and (max-width:600px) {
table td img {
width:100% !important;
display:block !important;
}
table td, table td div {
padding:0 0 20px 0 !important;
display:block !important;
}
.deviceWidth {width:440px!important;}
.center {text-align:center!important;}
}
@media only screen and (max-width:479px) {
.deviceWidth {width:280px!important; padding:0;}
.center {text-align:center!important;}
}
</style>
</head>
<body bgcolor="#FFFFFF" style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none; width: 100%!important; height: 100%;margin: 0; min-width: 100%; padding: 0; width: 100%;">
<!-- BODY -->
<table class="body-wrap" border="0" cellpadding="0" cellspacing="0" width="100%" class="body" align="center" style="margin:0 auto;border-collapse: collapse; border-spacing: 0; max-width: 100%; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 100%;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; vertical-align: top;">
<td class="container" bgcolor="#FFFFFF" style="display:block!important;max-width:600px!important;margin:0 auto!important;clear:both!important;">
<center class="content" data-parsed="" style="min-width: 664px; width: 100%;">
<table border="0" width="664" cellpadding="0" cellspacing="0" align="center" class="container float-center deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 664px;">
<tbody>
<tr style="border-collapse: collapse; border-spacing: 0; mso-table-lspace: 0; mso-table-rspace: 0; vertical-align: top;">
<td class="contained" style="border-collapse: collapse; border-spacing: 0; color: #474747; font-family: Arial,sans serif; font-size: 12px; font-weight: 400; line-height: 1.4; mso-table-lspace: 0; mso-table-rspace: 0; text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-bottom: 20px;">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-bottom: 20px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-bottom: 20px;padding-left:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" class="container deviceWidth" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; margin: 0 auto;">
<tr>
<td>
<div style="padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-left:10px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
<td>
<div style="padding-left:10px;">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table><!-- Main table ends -->
</body>
</html>
展望工作就好了。你只是在发送一堆混合信号和您不满意的结果。
因为你的代码是这样一个烂摊子,我不知道从哪里开始做的最简单的事情将开始。
在这个表中,你必须单独class
声明两班。 Outlook将忽略max-width
和width: 100%
。如果你想设置的宽度,增加:<table width="600">
启动表。在一些地方,你声明的大小为664px,其他地方600选择一个,并坚持下去。
<table class="body-wrap" border="0" cellpadding="0" cellspacing="0"
width="100%" class="body" align="center" style="margin:0 auto;
border-collapse: collapse; border-spacing: 0; max-width: 100%;
mso-table-lspace: 0; mso-table-rspace: 0; text-align: left; width: 100%;">
你沿着底部有三个图像都是大小600px的宽。这不会适合在一个600px的盒子。试戴调整到180像素,200像素与您添加填充工作。你不是宣称对<td>
细胞的宽度,所以展望占满了整个屏幕,因为它没有任何统治进去。
展望并不完全理解<div>
。您必须声明的宽度以确保它可以正确显示它们。
<td>
<div style="padding-left:10px;padding-right:10px">
<p style="font-weight: normal; font-size:14px; line-height:1.6;"><img src="http://placehold.it/600x300"/></p>
</div>
就像我说的,这是最有可能更容易重新开始。
祝好运。