Шаблон электронной почты HTML портится в окнах Outlook - PullRequest
Новая
       8

Шаблон электронной почты HTML портится в окнах Outlook

0 голосов
/ 23 декабря 2018

Я пытаюсь создать простой шаблон электронной почты, и он отлично работает на большинстве платформ, за исключением очень известного внешнего вида для windows7.Оно должно выглядеть примерно так:

enter image description here

, но на Windows 7/10 выглядит так (2003,07,13).

enter image description here

Я пытался прочитать много материала и следовал правилам.Но в перспективе ничего не работает.Содержимое моей таблицы выровнено по левому краю, и между изображениями много места. 

<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>

1 Ответ

0 голосов
/ 25 декабря 2018

Outlook работает просто отлично.Вы просто посылаете ему кучу смешанных сигналов, и вы недовольны результатами.

Самое простое, что можно сделать, это начать все сначала, потому что ваш код такой беспорядок, я не знаю, с чего начать..

В этой таблице у вас есть два класса в отдельных объявлениях class.Outlook игнорирует max-width и width: 100%.Если вы хотите установить ширину, добавьте: <table width="600">, чтобы начать таблицу.В некоторых местах вы объявляете размер 664 пикселей, в других - 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%;">

Все три изображения, которые вы видите внизу, имеют размер 600 пикселей в ширину.Это не вписывается в коробку на 600 пикселей.Попробуйте изменить их размер до 180px-200px, чтобы работать с добавленными вами отступами.Вы не объявляете ширину ячеек <td>, поэтому Outlook заполняет весь экран, так как ему не в чем править.

Outlook не понимает <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>

Как я уже сказал, скорее всего легче начать заново.

Удачи.

...