我以前从未见过,但是我的电子邮件模板在Gmail中显示时(也可能是其他客户端?),其摘录中带有HTML,例如:
John Smith向您发送了一条消息 width =“ 155” height =“ 55” title =“ Welcome” style =“ display:inline; float:none;” ... < / em>
我在电子邮件主题中使用了粗体,而斜体字是摘录。
有人知道我在做什么错吗?整个模板都在下面-我刚刚将一些虚拟副本用于标题等,原因是PHP生成的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>
Test title
</title>
</head>
<body style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; background: #f1f1f1; margin: 0; padding: 0;" bgcolor="#ffffff">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 30px 0px;">
<center style="width: 100%; min-width: 580px;">
<table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; background: transparent; padding: 0px;" bgcolor="transparent">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" valign="top">
<center style="width: 100%; min-width: 580px;">
<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; background: transparent; margin: 0 auto; padding: 0;" bgcolor="white">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 35px border-style: solid; border-width: 1px 1px 0;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="six sub-columns last" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 50%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 20px 0px 35px; text-align: center;" align="right" valign="middle">
<a href="https://foo.com">
<img src="https://app.foo.com/images/logo.png" alt="Foo" width="155" height="55" title="Foo" style="width: 155px; height: 55px; display: inline; float: none; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; clear: both; opacity: 1" align="none">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
<table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 50px; background: #ffffff;" align="left" valign="top" bgcolor="#ffffff">
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 50px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 0px 0px 20px; border-collapse: collapse !important;" align="left" valign="top">
<p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; font-weight: 300; margin: 0px 0px 10px; padding: 0px;" align="center">
Lorem ipsum dolor sit amet
</p>
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 40px 0px 35px; border-collapse: collapse !important; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;" align="left" valign="top">
<p style="text-align: center; color: black; font-family: Helvetica, Arial, sans-serif; font-size: 25px; line-height: 1.5; font-weight: 300; margin: 0px; padding: 0px;" align="center">
Test title
</p>
<p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px; padding: 0px; padding-top: 15px;" align="center">
Test subtitle
</p>
</td>
</tr>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 30px 0px 0px; border-collapse: collapse !important; text-align: center;" align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#17c68c">
<a href="https://foo.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; padding: 15px 40px; border-bottom: 3px solid #149369; display: inline-block; font-weight: 300;">
Test label
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- container end below -->
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px 0px 10px; padding: 0px; padding-bottom: 45px;" align="center">
From your friends at <a style="color: #17c68c;" href="https://foo.com">Foo</a>.
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分:1)
奇怪,我无法在Gmail或桌面版Outlook 2013中进行复制。
我确实注意到了一些可以尝试的方法:
不知道这两种方法是否有帮助,但最好至少让Doctype再试一次。
答案 1 :(得分:-1)
很显然,您在摘录之前错过了<img
标签。因为这部分:width="155" height="55" title="Welcome" style="display: inline; float: none;"
用于图像样式。