Outlook中的HTML电子邮件模板中的背景图像上的css按钮位置不正确

CSS button out of place over background image in HTML email template in Outlook(Outlook中的HTML电子邮件模板中的背景图像上的css按钮位置不正确)
本文介绍了Outlook中的HTML电子邮件模板中的背景图像上的css按钮位置不正确的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在创建一个带有背景图像和图像顶部的文本/CTA按钮的电子邮件模板。我将bulletproof backgrounds用于背景图像,并将beefree.io编辑器输出的按钮用于CTA按钮。在除Outlook 2010之外的所有客户端上,两者都可以很好地一起渲染。当背景只是一种颜色时,我可以让css按钮完美地呈现出来,反之亦然,当按钮只是一幅图像时。当我将两者放在一起时,结果如下:

它应该是这样呈现的:

显示了css按钮,只是位置错误。有没有人对我的代码哪里出错有什么建议?

https://codeshare.io/zr0Bj(背景图片代码从第192行开始)

谢谢 康纳

推荐答案

遗憾的是,您无法使用防弹背景图像顶部的防弹按钮。而不是这个,我会使用TD和标签按钮版本作为这个按钮。(有关酸的电子邮件有一篇很棒的文章-https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button)

这两种"防弹"技术效果不佳的原因是Outlook使用VML(矢量标记语言)来模仿其他电子邮件客户端的正常操作。Outlook接受的VML是有限的(Outlook的一切都是如此...)并且不允许很好地堆叠,所以当您尝试这样做时,它会破裂。同样的道理也适用于试图将两张"防弹"背景图像叠加在一起。结局不太好。

这篇关于Outlook中的HTML电子邮件模板中的背景图像上的css按钮位置不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
Only transition a transform in css?(是否仅在css中转换转换?)
CSS transform doesn#39;t change CSS layout(Css转换不会更改css布局)