Question

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

他们用来创建电子邮件的表格的加号/填充为1像素，如图片中所示+不识别字体。

https://imgur.com/gMtZsBY

https://imgur.com/7R1BzRm

我想要的是什么：https://imgur.com/kQIrH2T

我尝试使用填充：0，margin：-1，table-layout：fixed和其他思考。

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

首先;在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。坚持通用字体堆栈真的更好。如果你已经开始使用谷歌网络字体警告，它将不会看起来或行动或甚至可能在Outlook中以相同的方式出现。

编辑：我也注意到你的DOCTYPE是严格的。我推荐Transitional：

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

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

Outlook电子邮件模板1

1 个答案: