html-table - Outlook 电子邮件模板 1

Question

我尝试为 Outlook 创建模板电子邮件，但遇到了问题。

他们用于创建电子邮件的表格具有 1 px 的加边距/填充，如图片中的 + 无法识别字体。

我尝试使用填充：0，边距：-1，表格布局：固定和其他想法。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Single-Column Responsive Email Template</title>
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <style>
  @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

	table{
    	border-spacing: 0;
    	border: none;
    }
	td{
	margin: 0px;
	   
	    border: none;
	
	}
	tr{
		margin: 0px;
		border: none;
	
	}
	img{
		display:block;
	}
	p{
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		color: #1f2327;
	}
  </style>
</head>
 
<body>
 
<table border="0" style="height: 790px; width: 610px; border-collapse: collapse; " cellpadding="0" cellspacing="0" >
		<tr>
			<td width="90" style="text-align: right; width: 90px; height: 781px; padding:0; ">
				<img src="https://i.imgur.com/MLPTttG.png">
			</td>
			<td>
				<table width="527" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="527" style=" width: 527px; height: 19px;">
						<img src="https://i.imgur.com/wGaQ4Vf.png" style="width: 100%;">
						</td>
					</tr>
					<tr>
						<td style="height: 738px; margin: 20px;">
							a
						</td>
					</tr>
					<tr>
						<td style="width: 527px; height: 24px; background-color: #007034;">
							<img src="https://i.imgur.com/vrb1QrE.png">
						</td>
					</tr>
				</table>
			</td>
			<td style="width: 37px; height: 781px;">
				<img src="https://i.imgur.com/nVuB7Wk.png">
			</td>
		</tr>
</table>
</body>
</html>

score 0 · Accepted Answer

第一的; 在你的 CSS 中添加一些条件

 #outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
        -webkit-font-smoothing: antialiased;
    }
    v*{
        behavior:url(#default#VML);
        display:inline-block;
    }
    .ExternalClass{
        width:100%;
    }
    td{
        border-collapse: collapse!important;
    }
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div{
        line-height:100%;
    }
    a img{
        border:none;
    }
    a {
        text-decoration:none !important;
    }
    img{
        display:block;
        outline:none;
        text-decoration:none;
        border:none; 
         -ms-interpolation-mode: bicubic;
    }
    table{
        border-spacing:0;
        border-collapse: collapse !important;
        mso-table-lspace:0pt;
        mso-table-rspace:0pt;
    }

这些是非常基本的，它们涵盖了广泛的前景问题，包括table填充td问题。

我想解决的第二件事是自定义字体。自定义字体将很难实现，尤其是对于 Outlook。坚持使用通用字体堆栈确实会更好。如果您对使用 google 网络字体一无所知，请注意，它在 Outlook 中的外观或行为甚至可能以相同的方式出现。

编辑：我也注意到你DOCTYPE很严格。我建议过渡：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="format-detection" content="date=no"/>
  <meta name="format-detection" content="telephone=no"/>
     <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <!--<![endif]-->

在过去的几年里，这个标题部分对我来说非常好。

html-table - Outlook 电子邮件模板 1

1 回答 1

Related

Reference