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

我正在处理响应式 HTML 电子邮件，并且仅在 IE 中的 Gmail 中遇到渲染问题（必须如此！）它在其他 27 个客户端变体中运行良好。我们需要支持

我在这里设置了一个小提琴：http://jsfiddle.net/39gzj/ 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 http://jsfiddle.net/9P8cj/1/我创建了两种不同的方法来获得类似的效果。您可以选择最适合自己的一种。

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