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

Question

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

这是我想要完成的事情的图像。

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

Answer 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。这并不完美，但它可以让您更接近上面的截图。

Answer 2

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

 U+026A0 UNICODE
 ⚠ HEX CODE
 ⚠ HTML CODE

然后您可以使用更多代码内联样式：

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

段：

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

在html电子邮件中使用position: absolute的事情是它们将在Outlook上100％中断。