在电子邮件模板中使用绝对/相对位置答案

【问题标题】：Using absolute/relative position in email template在电子邮件模板中使用绝对/相对位置
【发布时间】：2018-06-03 10:29:39
【问题描述】：

我正在尝试将绝对/相对位置应用于电子邮件中的图像。跨度内有一个图像需要绝对定位以保持段落的行高。

这是我要完成的工作的图像。

我知道绝对和相对定位不能在电子邮件模板中使用，是否可以在不使用绝对定位的情况下修复图像定位。

【问题讨论】：

你能发布你目前正在尝试的代码吗？我不确定为什么不能使用边距、表格或边框来移动图像。

标签： css html email html-email

【解决方案1】：

position CSS property has very poor support in email clients，即使是那些被认为有不错的 CSS 支持的。

最好的办法是尝试否定图像的line-height，如下所示：

<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">

行高因字体而异，电子邮件客户倾向于对待line-height 略有不同。这并不完美，但它会让您更接近上面的屏幕截图。

【讨论】：

【解决方案2】：

这实际上有一个代码实体：

 U+026A0 UNICODE
 &#x26A0; HEX CODE
 &#9888; HTML CODE

然后你可以用更多的代码来内联样式：

 <p>Lorem Ipsum dolor sic met <strong style="color: #fff126">&#x26A0;</strong></p>

片段：

 &lt;p&gt;Lorem Ipsum dolor sic met &lt;strong style="color: #fff126; back"&gt;&amp;#9888;&lt;/strong&gt;&lt;/p&gt;

在 html 电子邮件中使用 position: absolute 的问题是它们会 100% 在 Outlook 上中断。

【讨论】：

可能看起来不多，但如果您在人们的手机上使用&#x26A0;，他们会看到正确的警告表情符号