HTML电子邮件中的嵌入式边框样式 [英] inline border styles in an HTML Email

问题描述

我正在处理响应HTML电子邮件，并且仅在IE中的Gmail中存在呈现问题(只是必须如此！)在其他27个客户端变体中都可以正常工作.我们需要支持

我在这里设置了一个小提琴: http://jsfiddle.net/39gzj/

现在，如果您看一下代码，将会看到有一个灰色的边框，然后包含了另一个白色的边框.出于某些奇怪的原因，资源管理器中的Gmail根本不会显示该边框，除非是注册底部底部的边框.我认为这与边框的编码方式有关(我正在取消其他人的代码，对此只做了一些细微的更改)，因为边框已如下完成:

border-left-style:solid;border-left-width:1px;border-left-color:#fff;

所以我更改了将灰色和白色边框声明为的方式:

border-left-style: 1px solid #fff;

但是，这没有任何区别.这让我发疯，所以请帮忙.我认为这可能与宽度有关吗?但是，解决了这个问题，这在所有其他客户中都解决了这个问题.任何帮助将不胜感激，因为我可能很快就会将头砸到电脑屏幕上.

赞赏此代码包含疯狂的内联样式，但这当然是HTML电子邮件的本质.

更新:删除<td>元素上的白色内部边框将呈现灰色边框.这与我错误地设置宽度有关吗?

更新2:它是IE9，无法正确显示.并且仅适用于Gmail.

解决方案

您的问题是表格本身位于边框上.您往往会发现电子邮件客户端不喜欢这样.我解决这个问题的方法是将表放在表中，如下所示:

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td width="600" valign="top" align="center" bgcolor="#CCCCCC">
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
    <td width="598" align="left">
    Text Here
    </td>
    </tr>
    </table>
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
</td>
</tr>
</table>
    <br/><br/><br/>
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr>
<td width="600" valign="top" align="left" bgcolor="#FFFFFF">
    Text Here
</td>
</tr>
</table>

这是a上的代码: jsfiddle 我创建了2种不同的方法来获得类似的效果.您可以选择最适合自己的一种.

我还看到您使用了某些电子邮件客户端不喜欢的max-width，这可能是您的问题.这是CampaignMonitor的CSS类指南，以及您应该使用和不应该使用的指南: http://www.campaignmonitor.com /css/

I'm working on a responsive HTML email and I'm having a rendering problem in Gmail ONLY in IE (just had to be!) It works fine in the other 27 client variants. we need to support

I've set up a fiddle here: http://jsfiddle.net/39gzj/

Now if you look at the code, you will see that there is a border that is grey, which then contains another border that is white. For some bizarre reason, Gmail in Explorer, will not show this border at all, save for the border at the bottom of the sign up bottom. I thought it was something to do with the way that I had coded the border (I'm going off someone elses code, I've only made some minor changes to this) as the border has been done as follows:

border-left-style:solid;border-left-width:1px;border-left-color:#fff;

So I changed the way that the border both grey and white to be declared as follows:

border-left-style: 1px solid #fff;

But this makes no difference whatsoever. This is driving me insane so please help if you can. I thought it may be something to do with the widths? But having played around with this it just broke the problem in all other clients. Any help would be much appreciated as I may smash my head into my computer screen soon.

Appreciate that this code contains crazy inline styles but this is of course the nature of HTML emails.

UPDATE: Removing the white inner border that is on the <td> elements renders the grey border. Is this something to do with me setting the widths incorrectly?

UPDATE 2 : It's IE9 that this is being rendered incorrectly in. And ONLY for Gmail.

解决方案

Your problem is that the border is on the table itself. You tend to find that the email clients don't like that. The way that I got around it was by placing tables within tables a bit like this:

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td width="600" valign="top" align="center" bgcolor="#CCCCCC">
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
    <td width="598" align="left">
    Text Here
    </td>
    </tr>
    </table>
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;">
</td>
</tr>
</table>
    <br/><br/><br/>
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr>
<td width="600" valign="top" align="left" bgcolor="#FFFFFF">
    Text Here
</td>
</tr>
</table>

Here is the code on a: jsfiddle I have created 2 different ways to get a similar effect. You can choose the one that works best for yourself.

I also see that you have used max-width which some email clients dont like so that might be your problem. here is the campaignmonitor guide to css classes and what you should and should not use: http://www.campaignmonitor.com/css/

这篇关于HTML电子邮件中的嵌入式边框样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！