gpt4 book ai didi

c# - Outlook 中的 UI 失真

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

我的应用程序生成的电子邮件在浏览器(示例 chrome)中打开时可以完美打开。但是当在 Microsoft Outlook 中打开同一封电子邮件时,它会严重变形(例如文本不可见,按钮文本被换行)。任何建议可能是什么问题。我已验证所有脚本(js 和 css)都已内联完成,即在 .aspx 页面上。在 Outlook 中打开时的电子邮件: enter image description here

在 Web 浏览器中打开时的电子邮件: enter image description here

HTML代码

<table class="footer" style="border-collapse: collapse;border-spacing: 0;width: 100%;background-color: #f6f9fb">
<tbody>
<tr>
<td class="inner" style="padding: 0;vertical-align: top;padding-top: 60px;padding-bottom: 55px" align="center">
<table class="cols" style="border-collapse: collapse;border-spacing: 0;width: 600px">
<tbody>
<tr>
<td class="left" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 22px;text-align: left;width: 35%;padding-right: 5px;color: #b3b3b3;font-family: sans-serif">
<table class="social" style="border-collapse: collapse;border-spacing: 0">
<tbody>
<tr>
<td colspan="3">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 4px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"><strong>Test Inc.</strong><br/>1234 Road Parkway<br/>Houston, Texas 77077<br/>1-811-811-9611<br/><br/>
<a href="SomeURL"><img style="border: 0;-ms-interpolation-mode: bicubic;display: block;max-width: 200px" src="SomeURL" alt="myatomDirect" width="135" height="58" border="0" /></a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="right" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 5px;text-align: right;width: 65%;padding-left: 5px;color: #b3b3b3;font-family: sans-serif">
<div id="campaign">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 10px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;">You are receiving this email because you registered for an account on
<a href="SomeURL"></a>. Please do not reply to this message; it was sent from an unmonitored e-mail address. This message is a service e-mail related to your use of . For general inquiries or to request support with your account, please email us at
<a href="SomeURL">SomeURL</a>.</p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 15px;text-align: center;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

任何建议将不胜感激。

最佳答案

由于 Outlook 使用 Microsoft Word 呈现电子邮件,因此某些问题可能会在 Outlook 中出现,而不会在任何其他电子邮件客户端中出现。因此,您需要格外小心处理您的电子邮件。

<table class="cols" style="border-collapse: collapse; border-spacing: 0; width: 600;">

尝试使用不带 px 的宽度属性。 This has been discussed here

Tips to bridge Outlook hurdles

如果主要字体在订阅者的设备上不可用,Outlook 会在 Times New Roman 中呈现整个电子邮件副本,而忽略指定的后备字体。在这种情况下,您需要强制 Outlook 呈现使用条件代码指定的回退字体。

<!--[if mso]> <style> h1 {
font-family: Primary font, Fallback font;
} </style><![endif]-->

Outlook 不会自动将文本换行到您创建的表格中。相反,表格单元格将加宽以尝试容纳大 URL 或其他完整的文本字符串。为避免这种情况,您可以包括以下内容:

<td style="word-break:break-all;">

希望这对你有用。

关于c# - Outlook 中的 UI 失真,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49491141/

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