5

我正在处理响应式 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。

4

2 回答 2

3

你的问题是边框在桌子上。您往往会发现电子邮件客户端不喜欢这样。我解决它的方法是在表格中放置表格，有点像这样：

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

于 2013-04-16T10:05:20.517 回答
2

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

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

于 2015-07-07T17:22:24.817 回答