HTML电子邮件中的嵌入式边框样式

Question

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.

Answer 1

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/

Answer 2

I use the following on a table in my email and have no issues.

border-left: 2px #000000 solid;border-right: 2px #000000 solid;

I've tested in multiple browsers & email clients. Make sure your styles are inline, make sure you haven't got a differing border on any outer tables, as Outlook etc. seem to inherit from the parent TD

The problem I had with IE9 and Gmail which stood out to me was that it rendered the responsive version of my email, so check your media queries. The way to solve this is to add CSS so if you have <td width="600"> you need to make sure it becomes <td width="600" style="width:600px;">