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 我创造了两种不同的方法来获得类似的效果。您可以选择最适合自己的那个。

我也看到你使用了一些电子邮件客户不喜欢的max-width，这可能是你的问题。这里是css课程的竞选活动指南，以及你应该和不应该使用的内容：http://www.campaignmonitor.com/css/

Answer 2

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

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

我已经在多个浏览器中测试过＆amp;邮件客户端。确保你的样式是内联的，确保你没有在任何外表上有不同的边框，因为Outlook等似乎继承了父TD

我在IE9和Gmail上遇到的问题就是它呈现了我的电子邮件的响应版本，因此请检查您的媒体查询。解决此问题的方法是添加CSS，因此如果您有<td width="600">，则需要确保它变为<td width="600" style="width:600px;">

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

2 个答案: