gpt4 book ai didi

html - 防弹背景 MSO 扭曲 Outlook 的电子邮件布局

转载 作者:太空宇宙 更新时间:2023-11-04 06:56:02 25 4
gpt4 key购买 nike

我已经应用 Bulletproof 背景来实现 Outlook 的背景图像。背景图片加载正常,但其样式/结构与 Outlook 上的不符。

它在 Gmail 上的样子(我想要的样子):

enter image description here

它在 Outlook 2007、2010、2013 和 2016 (Windows) 上的显示方式:

enter image description here

关于为什么会发生这种情况有什么想法吗?

代码:

<!--DOCTYPE html-->
<html>

<head>
<title></title>
</head>

<body>
<table leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" border="0" cellpadding="0" cellspacing="0" style="width:600px; margin:0 auto; ">
<tbody>

<tr>
<!-- Condition to allow background images to work in Outlook -->
<td class="background_image-td" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div class="background_img-container">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
<!-- Nested table for overlapping td -->
<tr>
<td class="table-td" align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="table-td">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#e3e1e5" style="width:50%; opacity: 0.9; padding: 40px 40px; background-color: #e3e1e5;">
<tbody>
<tr>
<td style="color: #1c9ad6; font-size:1.5rem; font-family:'Klavika', Arial,sans-serif; text-align:left; padding:20px;">How to address your taste formulation challenges.</td>
</tr>
<tr>
<td style="padding:10px 0px;">
<!--PADDING-->
</td>
</tr>
<tr>
<td class="table-td" align="center">
<a href="#" alt="Discover more at SSW" target="_blank">
<img src="https://storage.pardot.com/213851/80839/discover_more.png" alt="Discover more at SSW" style="width:246px;">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Nested table end -->
<!-- Creating padding below nested table -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
<!-- Nested table end -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>

</body>

</html>

最佳答案

给这行 VML 添加一个高度。如果我记得 Outlook 不会根据其中的内容调整 VML 形状。

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">

需要注意的一件事是,在 Outlook 2013/2016 的 VML 中,左填充将不起作用。如果填充是必不可少的,请尝试将其替换为固定宽度 td并使用 CSS/媒体查询来隐藏它并为移动 View 应用填充。

关于html - 防弹背景 MSO 扭曲 Outlook 的电子邮件布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52442812/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com