【发布时间】：2021-06-25 15:27:17
【问题描述】：
我正在尝试为具有背景图像和居中文本的电子邮件创建标题。这是它在“普通”电子邮件客户端中的外观：
但是在 Outlook 中它并没有退出工作，它最终是这样的：
是否有任何电子邮件专家可以帮助我解决此问题？
这是我目前所拥有的（内置反应）：
<table width="640" cellPadding="0" cellSpacing="0" align="center" style={{ margin: '0 auto' }}>
<tbody>
<tr>
<td
height="143"
width="640"
align="center"
valign="middle"
background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
style={{ backgroundColor: '#00A699', backgroundSize: 'cover' }}
>
<div
dangerouslySetInnerHTML={{
__html: `<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
<v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
<v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
<![endif]-->`,
}}
/>
<table
cellPadding="0"
cellSpacing="0"
className="arb_w100 "
align="center"
style={{ margin: '0 auto' }}
>
<tbody>
<tr>
<td align="center">
<td
align="center"
valign="bottom"
className="arb_headline_1"
style={{ paddingTop: '10px' }}
>
<span
style={{
fontSize: '22px',
fontWeight: 400,
fontFamily: 'Helvetica, Arial, sans-serif',
lineHeight: '28px',
color: '#ffffff',
}}
>
For a limited time, take
</span>
</td>
</td>
</tr>
</tbody>
</table>
<div
dangerouslySetInnerHTML={{
__html: `<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->`,
}}
/>
</td>
</tr>
</tbody>
</table>
下面是上面翻译成标准 HTML 的代码：
<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td height="143" width="640" align="center" valign="middle"
background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
style="background-color:#00A699;background-size:cover">
<div><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
<v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
<v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
<![endif]--></div>
<table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
<tbody>
<tr>
<td align="center">
<td align="center" valign="bottom" className="arb_headline_1" style="padding-top: 10px;"><span
style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
</td>
</td>
</tr>
</tbody>
</table>
<div><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
【问题讨论】：
-
你好，你能用发送时的最终 HTML 交换当前的 sn-p 吗？当我们看不到 React 在最终实例中生成的内容时，很难调试。可能是您的 VML (Outlook) 代码存在问题，因此查看最终代码会更有帮助。
-
@Digital_Frankenstein 当然，只是在它下面添加了原始 HTML
标签： html outlook html-email email-templates