HTML 电子邮件中的内嵌边框样式答案

【问题标题】：inline border styles in an HTML EmailHTML 电子邮件中的内嵌边框样式
【发布时间】：2013-04-16 09:35:29
【问题描述】：

我正在处理响应式 HTML 电子邮件，但我在 Gmail 中仅在 IE 中出现渲染问题（必须如此！）它在其他 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。

【问题讨论】：

你可以试试这样border-left:1px solid #fff;
会不会只是border-left 而不是border-left-style？样式是指线条的类型，在您的情况下为solid
谢谢大家，准备运行它并通过 Litmus 对其进行测试。
-sigh-您遇到的 IE 版本有问题吗？
@Spudley 我知道这种感觉。据 Litmus 称，他们将 IE9 用于基于 Web 的电子邮件客户端。

标签： html css html-email

【解决方案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>

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

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

【讨论】：

谢谢你的回答老兄。问题是我发布的代码已经是“表中的表”。最烦人的是，此代码适用于除 Gmail 之外的所有电子邮件客户端，并且仅适用于 IE。我知道max-width 问题，但我们在很多电子邮件中都使用它，这还不是问题（我的命运很诱人！）
我应用边框的方式和你自己很不一样。我正在使用一个小间隔图像来给出一个 1px 的顶部边框，对于左右边框，我的内表比大表小一点，它被告知要对齐中心，从而呈现出边框的外观。我已经多次遇到这个问题，并且它是我找到的解决方案
好的，谢谢伙计。我会试一试。如果是我，我会为内表使用 1px 填充，然后给外表一个灰色边框。该死的这些 HTML 电子邮件。
我更新了我的代码，这样你就可以看到两种不同的方式来获得相同的效果。如果您想删除一个或多个边框边，使用图像的方式效果最好。

【解决方案2】：

我在电子邮件中的表格上使用以下内容，没有任何问题。

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

我已经在多个浏览器和电子邮件客户端中进行了测试。确保您的样式是内联的，确保您在任何外部表格上没有不同的边框，因为 Outlook 等似乎继承自父级 TD

IE9 和 Gmail 对我来说最突出的问题是它呈现了我的电子邮件的响应版本，因此请检查您的媒体查询。解决这个问题的方法是添加 CSS，所以如果你有 <td width="600">，你需要确保它变成 <td width="600" style="width:600px;">

【讨论】：