HTML电子邮件模板在Outlook窗口越来越搞砸

问题描述 投票:1回答:1

我想创建一个简单的电子邮件模板,它的正常工作在大多数的平台除了在Windows7中非常有名的前景。它应该是这样的形象

enter image description here

但它看起来像在Outlook(2003,07,13)在Windows 7/10。

enter image description here

我曾尝试阅读大量的材料和遵循的规则。但在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>
html-email
1个回答
1
投票

展望工作就好了。你只是在发送一堆混合信号和您不满意的结果。

因为你的代码是这样一个烂摊子,我不知道从哪里开始做的最简单的事情将开始。

在这个表中,你必须单独class声明两班。 Outlook将忽略max-widthwidth: 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>

就像我说的,这是最有可能更容易重新开始。

祝好运。

© www.soinside.com 2019 - 2024. All rights reserved.