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

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 的处理方式略有不同。这并不完美，但它会让您更接近上面的屏幕截图。