[英]Gmail css margin not working
I am building an email and I need an image ( a call to action button) to be on the top of another, with he following code it's only working in few clients: 我正在建立一封电子邮件,并且需要一个图像(一个号召性用语按钮)放在另一个顶部,他下面的代码仅在少数客户端中起作用:
<tr>
<td align="center" width="660" height="457" valign="top"><img width="660" height="457" style="display:block; vertical-align:top; margin:0; padding:0; outline:none; border:none;" src="image_1.jpg" />
<a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="341" height="56" style="display:block; vertical-align:top; margin-top:-300px; padding:0; outline:none; border:none;" src="cta.png" /></a></td>
</tr>
Is there a better way of doing this? 有更好的方法吗?
在Gmail中,使用padding
而不是margin
来padding
空格,就像Diodeus提到的campaignmonitor是很好的资源
Looks like you are trying to work around the fact that email doesn't support background images in tables (consistently across clients anyway). 看起来您正在尝试解决以下事实:电子邮件不支持表格中的背景图片(无论如何始终在客户端中一致)。 Clever idea with the margin-top:-300;
margin-top:-300;
聪明点子margin-top:-300;
, but it seems like it isn't working as hoped. ,但似乎并没有达到预期的效果。 (css margin isn't supported across the board). (不全面支持CSS保证金)。
The only way I know of to get the desired layout is to cut the background image up into smaller blocks: 我知道获得所需布局的唯一方法是将背景图像切成较小的块:
<table width="660" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="660" colspan="3">
<img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
</td>
</tr>
<tr>
<td width="60">
<img width="60" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
</td>
<td width="300">
<a href="http://www.facebook.com/LurpakButter/app_299490026832067"><img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="cta.png" /></a>
</td>
<td width="300">
<img width="300" height="50" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
</td>
</tr>
<tr>
<td align="center" width="660" colspan="3">
<img width="660" height="100" style="margin: 0; border: 0; padding: 0; display: block;" src="image_1.jpg" />
</td>
</tr>
</table>
Alternatively you could just make one big image and do image mapping, but that probably isn't the best practice for a call to action. 或者,您可以只制作一个大图像并进行图像映射,但这可能不是号召性用语的最佳实践。
Positioning and many other CSS features that may cause content to jump or leak-out of the client area on many mail clients is restricted. 限制位置和许多其他CSS功能,这些功能可能会导致内容在许多邮件客户端上跳出或泄漏出客户端区域。 Therefore, positioning elements on top of each other is impossible on many mail clients. 因此,在许多邮件客户端上不可能将元素放置在彼此的顶部。
For web-based clients, most of this is deliberate to prevent emails from spoofing client features. 对于基于Web的客户端,大多数操作都是故意的,以防止电子邮件欺骗客户端功能。 For MS-Outlook it's a matter of it using the ever so crappy MS-WORD rendering engine. 对于MS-Outlook,使用日渐糟糕的MS-WORD呈现引擎就可以了。
Here's a good guide to what you can use. 这是您可以使用的好指南。
http://www.campaignmonitor.com/css/ http://www.campaignmonitor.com/css/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.