email - 仅在 2016 年展望中突破
问题描述
我有一封用 td 制作的带有 img 和“border”的电子邮件。仅在宽度为 260px 的 Outlook 2016 td 上显示中间有中断。我找不到原因。我用 cellpading:0、celspaccing:0 等复制了许多样式,但没有任何帮助。问题似乎只发生在 Outlook 2016 上。相同的电子邮件代码在其他 Outlook 和 Web 电子邮件客户端上工作正常。
那是我的html代码:
<table style="border-collapse:collapse;margin: 0; padding: 0; line-height: 0; font-size: 0; width: 335px; display: inline-block; text-align: center; vertical-align: top;"
border="0" cellspacing="0" cellpadding="0" align="center" valign="top">
<tbody>
<tr>
<td style="margin: 0; padding: 0; width: 20px; display: inline-block; text-align: center;" width="20">
</td>
<td style="margin: 0; padding: 0; line-height: 0; font-size: 0; width: 270px; text-align: center; background-color: #ffe0e6;"
border="0" cellspacing="0" cellpadding="0" align="center" width="270">
<img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; font-size: 0; border: 0; outline: 0; display: block; border-collapse:collapse;"
border="0" outline="0" height="270" align="top" cellpadding=”0″>
</td>
<td style="margin: 0; padding: 0; line-height: 0; font-size: 0; text-align: center;" border="0" cellspacing="0" cellpadding="0"
align="center">
<table style="border-collapse:collapse;margin: 0; padding: 0; display: inline-block; line-height: 0; text-align: center; font-size: 0; vertical-align: top;"
border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="width:10px; height: 10px; line-height:0; font-size: 0" height="10" width="10">
</td>
</tr>
<tr>
<td style="width:10px; height: 260px; background-color: #ffe0e6; line-height:0; font-size: 0" height="260" width="10">
</td>
</tr>
</tbody>
</table>
</td>
<td style="margin: 0; padding: 0; width: 25px; display: inline-block; text-align: center; height: 270px;" width="25" height="270">
</td>
</tr>
<tr>
<td style="margin: 0; padding: 0; width: 20px; height: 10px; display: inline-block; text-align: center; line-height:0; font-size: 0"
width="20" height="10">
</td>
<td style="margin: 0; padding: 0; line-height: 0; font-size: 0; text-align: center;" border="0" cellspacing="0" cellpadding="0"
align="center">
<table style="border-collapse:collapse;margin: 0; padding: 0; display: inline-block; text-align: center; font-size: 0; line-height: 0; vertical-align: top; height: 10px"
border="0" cellspacing="0" cellpadding="0" align="center" height="10">
<tbody>
<tr>
<td style="margin: 0; padding: 0; height: 10px; width: 10px; line-height:0; font-size: 0; background-color: #ffffff;" width="10"
height="10">
</td>
<td style="margin: 0; padding: 0; height: 10px; width: 260px; line-height:0; font-size: 0; background-color: #ffe0e6;" width="260"
height="10">
</td>
</tr>
</tbody>
</table>
</td>
<td style="margin: 0; padding: 0; height: 10px; width: 10px; line-height:0; font-size: 0; background-color: #ffe0e6;" width="10"
height="10">
</td>
<td style="margin: 0; padding: 0; width: 35px; display: inline-block; line-height:0; font-size: 0; text-align: center;" width="35">
</td>
</tr>
<tr>
<td style="margin: 0; padding: 0; height: 30px; display: inline-block; line-height:0; font-size: 0; text-align: center;"
height="30">
</td>
</tr>
</tbody>
</table>
我在发生中断的那个粉红色 td 元素中圈出了中断
那条粉红色的垂直线应该都是粉红色的。这就是td:
<td style="width:10px; height: 260px; background-color: #ffe0e6; line-height:0; font-size: 0" height="260" width="10">
</td>
解决方案
您的表结构似乎不必要地复杂。您的内联样式有一些不需要存在的命令。您还有左侧的表格单元格,似乎没有做任何事情。所以为了简单起见,我创建了一个新表。例如简单,我创建了一个样式表:
样式表:
<style>
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
</style>
<!--[if mso]><style>
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
border-collapse: collapse;
}
img {
-ms-interpolation-mode:bicubic;
}
</style><![endif]-->
编码:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ff0000">
<img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; display: block;" border="0" outline="0" height="270" align="top" /></td>
<td bgcolor="#ff0000" valign="top" width="10">
<table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin: 0; padding: 0; line-height: 0; text-align: center; font-size: 0; vertical-align: top;">
<tr>
<td width="10" height="10">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ff0000" align="left" height="10" style="max-height: 10px !important;">
<table align="left" bgcolor="#ffffff" height="10" height="10" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; line-height: 0; font-size: 0;">
<tr>
<td width="10" height="10">
</td>
</tr>
</table>
</td>
<td bgcolor="#ff0000"></td>
</tr>
- 我添加了红色作为背景色
- 如果需要,您可以轻松添加左侧表格单元格
background-color
Outlook 有问题。我建议background
改用
我在 Litmus 中对此进行了测试,以确保它适用于所有 Outlook 版本、Gmail 和 Apple / Android。
获得相同效果的更简单方法是使用box-shadow
:
<img src="https://picsum.photos/270/270" width="270" style="max-width: 270px; max-height: 270px; margin: 0; padding: 0; line-height: 0; display: block; box-shadow: 10px 10px 0px red;" border="0" outline="0" height="270" align="top" />
需要注意的是,它不适用于 Outlook、Gmail,但如果它适合您,那么它的样式会容易得多。我提到它是为了其他人正在寻找向图像添加阴影的方法。
祝你好运。
推荐阅读
- reactjs - Fully include Google web font in create-react-app build (without ejecting)
- python - 循环遍历csv文件并根据条件获取数据
- c# - 如何检查我的程序是否与 C# 中的 MSQL 数据库连接?
- magento2 - 具有可配置产品的 Magento 2.2.5 分层导航不起作用
- javascript - 超级函数如何访问子类中的另一个超级函数?
- python-3.x - tkinter Text 小部件不打印输入数据
- javascript - 学习了redux的react后,我们需要在组件中声明状态吗?
- java - 使用 Spring bean 的静态方法。
- plsql - 触发过程调用
- jboss - War 文件没有在 JBoss 服务器中自动部署