html-email 相关问题

用于格式化电子邮件的HTML。

使用 html 和 css 的电子邮件内容布局

我正在制作一个电子邮件模板,它将发送包含填充内容的电子邮件。问题是我无法使布局正常工作并得到电子邮件客户端的支持。 我开始使用 Flex-

回答 1 投票 0

HTML 电子邮件模板 Outlook 渲染问题

我的 HTML 电子邮件模板无法在 Outlook 中正确呈现。 邮箱: Outlook 桌面: 我的 HTML 电子邮件模板未在 Outlook 中正确呈现。Gmail:Outlook 桌面: <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center;"> <tr> <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;text-align: center;vertical-align: middle;"></td> <td id="title" style="background-color: #ececec; display: table-cell;width: 40%; padding: 0px; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td> <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;"></td> </tr> </table> 如何使其看起来与 Gmail 中的一样? 您需要 2 行表格布局。不幸的是,rowspan 在 Outlook 中不能很好地工作。您仍然可以在表格单元格内添加适当的内容。然后您应该从表格单元格中删除大部分样式。在这些单元格上使用 display: block,然后在它们上重新声明 display: tabel-cell 是没有意义的。直接使用默认即可。 最后但并非最不重要的一点是,您必须使用 &nbsp 将内容添加到表格单元格,否则它们会折叠。 我还将 background-color 从单元格移至表格本身。 <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center; background-color: #ececec;"> <tr> <td> <table style="width: 100%"> <tr> <td style="border-bottom: 2px solid #ccc;">&nbsp</td> </tr> <tr> <td>&nbsp</td> </tr> </table> </td> <td id="title" style="width: 40%; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td> <td> <table style="width: 100%;"> <tr> <td style="border-bottom: 2px solid #ccc;">&nbsp</td> </tr> <tr> <td>&nbsp</td> </tr> </table> </td> </tr> </table>

回答 1 投票 0

如何保留搜索并保存自动生成的 Gmail 布局类和事件代码

我正在尝试使用 Gmail html 布局模板。如下面的快照所示,该元素具有自动生成的(我认为)类属性 class="MHCHNe lCsUvc aog TbVst aoN" 这是...

回答 1 投票 0

电子邮件中嵌入的图像也成为附件

在 HTML 电子邮件中正确嵌入内嵌图像的脚本还将图像添加为附件。如何消除每个图像的第二个副本? # 附加任何图像 图像 = '''/使用...

回答 1 投票 0

如何使用 ASP .NET Core 7 发送 HTML 电子邮件

我需要使用 SMTP 和 MailKit 使用 ASP .NET Core 7 发送带有 HTML 标签的电子邮件。我已经发送了带有最少 html 标签的电子邮件,例如 .但我需要发送带有页眉和页脚的内容...

回答 1 投票 0

修复 yandex 邮件中的 HTML 电子邮件模板

我正在将模板发送到我的 yandex 邮件,一切正常。 但我需要从 yandex 邮件转发此模板。当我单击前进时,模板将移至左侧。 并且还以某种方式删除一些 css 或我...

回答 1 投票 0

为什么 Outlook 中的电子邮件模板与 Thunderbird 中的不同

我有一些 php 代码,可以使用 PHPmailer 发送电子邮件。除了按钮之外,这封电子邮件看起来不错。我在 Thunderbird 115.7.0 中测试过它,看起来不错。 在桌面版 Outlook 中...

回答 2 投票 0

使用 Mailchimp 在深色背景上强制 Gmail iOS 中的文本颜色

我正在 Mailchimp 中设计一个用于电子邮件的模板。邮件的页脚为深蓝色,带有白色文本。默认情况下,Gmail iOS 应用程序会翻转对比度,因此我们失去了所有漂亮的手写笔...

回答 3 投票 0

可点击的 html 电子邮件签名已损坏

我按照教程(https://www.youtube.com/watch?v=9VagizlpHNc)制作了可点击的电子邮件签名,但是当我将其放入 gmail 中时,一切都被破坏了。我相信有什么问题......

回答 1 投票 0

打开文件并调用电子邮件超链接中的子程序

当您单击电子邮件中的超链接时,我希望打开一个 Excel 文件并运行一个名为“LoadCSV”的子过程。 我已经尝试使用下面的代码。邮件正文包含...

回答 1 投票 0

MJML 列无法在移动设备上堆叠?

我使用 mjml.io 的在线编辑器创建了一个非常基本的 2 列设计,但我无法使其在移动设备上堆叠。 使用下面的代码,电子邮件在桌面上看起来完全一样(Outlo...

回答 1 投票 0

有没有办法让按钮命令发送给 Gmail 或 Outlook 上的人? (已编辑)

所以我从“联系我们”页面想到了这一点。 “按钮命令是否会发送给 Gmail 或 Outlook 上的人员?” 然后,我去了 Stack Overflow,搜索了“如何制作按钮命令

回答 1 投票 0

似乎无法使用 css 有效地格式化表格,因为某些选择器被忽略了

我有一个 Power Automate 流程,它使用 Monday.com 和 Microsoft Outlook 生成有关 monday.com 中新记录的表格 我有一个简单的流程,可以触发新记录并向...

回答 1 投票 0

电子邮件模板位置绝对?

在电子邮件模板中使用position:absolute是否安全?

回答 5 投票 0

Outlook 中圆形按钮的电子邮件 CSS,可控制暗模式颜色

此按钮使用记录完善的 VML 解决方案,可以在 Outlook 中呈现出色的效果,但仅限于轻型模式。在黑暗模式下,我失去了对“填充颜色”的控制,并得到了这个黑色的ove......

回答 1 投票 0

调整从 Excel 复制到 Outlook 电子邮件的范围图像的大小

我将 Excel 中的范围复制到 Outlook 电子邮件中。图像太小。 .Width 和.Height 不会改变图像。 将 OutApp2 调暗为对象 将 OutMail2 调暗为对象 Dim table2 作为范围 调暗 ws2 As

回答 1 投票 0

Outlook 电子邮件引擎正在添加额外的填充

我正在尝试创建一个 html 电子邮件模板,该模板在几乎所有客户端(除了 Outlook 桌面)中都可以正常工作。 我尝试了大部分与此相关的线程解决方案,但我无法找到...

回答 1 投票 0

如何在表格中间而不是顶部显示图像?

是关于这个模块的,我需要将图像显示在中间,而不是顶部 是关于这个模块的,我需要将图像显示在中间,而不是顶部<!-- D2 - BANNER - LIRT --><table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center"> <!--LEFT--><table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" width="100%"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a></td></tr></table><!--//LEFT--><!--[if gte mso]> </td> <td valign="top"> <![endif]--><!--RIGHT--><table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td></tr><tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td></tr></table></td></tr></table><!--//RIGHT--></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"> </td></tr></table><!-- //D2 - BANNER - LIRT --> 我需要将图像垂直居中。我尝试在 TR 标签上添加 valign="middle",但没有成功。 要通过图像实现您所需要的效果,只需进行一个小修复即可。 <!-- ... [earlier code] ... --> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr> <td align="center" valign="middle"> <!-- valign="middle" added here --> <!--LEFT--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" valign="middle" width="100%"> <!-- valign="middle" added here --> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"> <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a> </td> </tr> </table> <!--//LEFT--> <!-- [rest of your code] ... --> </td> </tr> </table> <!-- ... [later code] ... --> 如果你想让图像垂直居中,可以使用CSS Flexbox <!-- D2 - BANNER - LIRT --> <table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center" style="display: flex; align-items: center;"> <!--LEFT--> <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" width="100%"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"> <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a> </td> </tr> </table> <!--//LEFT--> <!--[if gte mso]> </td> <td valign="top"> <![endif]--> <!--RIGHT--> <table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td> </tr> <tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td> </tr> </table> </td> </tr> </table> <!--//RIGHT--> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"></td> </tr> </table> <!-- //D2 - BANNER - LIRT --> 我添加到您的代码中的是style="display: flex; align-items: center;"到td。 要使用 HTML 获得所需内容,您需要将 valign="middle" (如 andrewbyteforge 指出的那样)和 height="300" 设置为包含图像的 <td>。您的原始 HTML 有 <td align="center" width="100%">,但它需要是 <td align="center" valign="middle" width="100%" height="300">。我希望这有帮助。 <!-- D2 - BANNER - LIRT --><table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600"> <tr> <td class="padding-lr_20"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600"> <tr valign="bottom"> <td align="center"> <!--LEFT--><table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300"> <tr> <td align="center" valign="middle" width="100%" height="300"> <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a></td></tr></table><!--//LEFT--><!--[if gte mso]> </td> <td valign="top"> <![endif]--><!--RIGHT--><table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300"> <tr valign="middle"> <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265"> <!--[if mso]> <div style="padding-top:20px;"></div> <![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" class="h1 text-center" style="font-family: sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;"> Text Text Text Text Text Text </td></tr><tr> <td align="center" class="body_text text-center" style="font-family: sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;"> Text Text Text Text Text Text Text Text Text </td></tr></table></td></tr></table><!--//RIGHT--></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600"> <tr> <td style="padding-top: 40px;"> </td></tr></table><!-- //D2 - BANNER - LIRT --> 如果不设置高度,就没有“中间”,它会根据其内容(本例中的图像)全部折叠,并且它只是位于其父级的顶部<td>。

回答 3 投票 0

边框半径在 Outlook 桌面上不起作用

使按钮变圆的边框半径在 Outlook 桌面版中不起作用。 这是我在 html 中尝试的代码 使按钮变圆的边框半径在 Outlook 桌面版中不起作用。 这是我在 html 中尝试的代码 <table border="0" cellspacing="0" cellpadding="10" valign="top"> <tr> <td class="outlook-btn" align="center" style="font-size:18px; background-color:#FFFFFF;"> <font face="Arial, sans-serif"> <a href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none;">GET STARTED</a> </font> </td> </tr> </table> 展望有条件评论 .outlook-btn{ padding: 10px 25px !important; border-radius: 20px !important; border: 1px solid #000000 !important; } 自 2007 年起,Windows 上的 Outlook 使用 Word 作为渲染引擎。该引擎自 2007 年以来就没有真正更新过,因此它不支持此后出现的任何 HTML 或 CSS。所以它不支持border-radius。 (您可以查看 CanIEmail.com,了解有关 Outlook 和其他电子邮件客户端中 CSS 支持的详细信息:https://www.caniemail.com/features/css-border-radius/)。 在 Windows 上的 Outlook 中获得圆角的常见解决方案是使用 VML。它是一种类似于 SVG 的图像格式。 Campaign Monitor 有一个按钮生成器,该按钮生成器使用 VML for Outlook on Windows:https://buttons.cm/(但请注意,VML 可能会对可访问性产生负面影响,例如使 VML 中的链接对键盘用户不可用。)

回答 1 投票 0

为什么 Outlook 会丢失从 SQL 发送的电子邮件的 HTML 格式?

我有一封在 SQL Server Management Studio 中创建的电子邮件,其正文为 HTML。在 HTML 中,我使用 CSS 来更改表中某些行的背景颜色。当我查看 HTML 时,它看起来很好;

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.