HTML电子邮件中的内联边框样式

Question

我正在处理一个响应式HTML电子邮件,我只在IE浏览器中遇到渲染问题(只是必须!)它在其他27个客户端变体中工作正常.我们需要支持

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

现在,如果您查看代码,您将看到有一个灰色边框,然后包含另一个白色边框.出于某些奇怪的原因,在Explorer中的Gmail,根本不会显示此边框,保存在底部注册底部的边框.我认为这与我编写边框的方式有关(我正在删除别人的代码,我只对其进行了一些细微的更改),因为边框已按如下方式完成:

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

所以我改变了灰色和白色边框的声明方式如下:

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

但这没有任何区别.这让我疯了,所以请尽可能帮忙.我觉得这可能与宽度有关？但是玩过这个,它刚刚打破了所有其他客户的问题.任何帮助将非常感激,因为我可能很快就会把我的头撞到我的电脑屏幕上.

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

更新:删除<td>元素上的白色内边框呈现灰色边框.这与我设置宽度不正确有关吗？

更新2:这是IE9,它被正确渲染.仅适用于Gmail.

Answer 1

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

<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>

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

我还发现您使用了一些电子邮件客户端不喜欢的最大宽度，因此这可能是您的问题。这里是campaignmonitor关于css类的指南以及你应该和不应该使用的内容：http://www.campaignmonitor.com/css/