HTML 电子邮件中的内联边框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16033521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inline border styles in an HTML Email
提问by zik
I'm working on a responsive HTML email and I'm having a rendering problem in Gmail ONLY in IE (just had to be!) It works fine in the other 27 client variants. we need to support
我正在处理响应式 HTML 电子邮件，而我在 Gmail 中仅在 IE 中遇到渲染问题（必须如此！）它在其他 27 个客户端变体中运行良好。我们需要支持
I've set up a fiddle here: http://jsfiddle.net/39gzj/
我在这里设置了一个小提琴：http: //jsfiddle.net/39gzj/
Now if you look at the code, you will see that there is a border that is grey, which then contains another border that is white. For some bizarre reason, Gmail in Explorer, will not show this border at all, save for the border at the bottom of the sign up bottom. I thought it was something to do with the way that I had coded the border (I'm going off someone elses code, I've only made some minor changes to this) as the border has been done as follows:
现在，如果您查看代码，您将看到有一个灰色边框，然后包含另一个白色边框。出于某种奇怪的原因，资源管理器中的 Gmail 根本不会显示此边框，除了注册底部底部的边框。我认为这与我对边框进行编码的方式有关（我要使用别人的代码，我只对此做了一些小的更改），因为边框已完成如下：
border-left-style:solid;border-left-width:1px;border-left-color:#fff;
So I changed the way that the border both grey and white to be declared as follows:
所以我改变了灰色和白色边框的声明方式，如下所示：
border-left-style: 1px solid #fff;
But this makes no difference whatsoever. This is driving me insane so please help if you can. I thought it may be something to do with the widths? But having played around with this it just broke the problem in all other clients. Any help would be much appreciated as I may smash my head into my computer screen soon.
但这没有任何区别。这让我发疯，所以如果可以的话请帮忙。我认为这可能与宽度有关？但是在解决这个问题后，它只是解决了所有其他客户端的问题。任何帮助将不胜感激，因为我可能很快就会把头撞到我的电脑屏幕上。
Appreciate that this code contains crazy inline styles but this is of course the nature of HTML emails.
感谢这段代码包含疯狂的内联样式，但这当然是 HTML 电子邮件的本质。
UPDATE: Removing the white inner border that is on the <td>elements renders the grey border. Is this something to do with me setting the widths incorrectly?
更新：移除<td>元素上的白色内边框会呈现灰色边框。这与我错误地设置宽度有关吗？
UPDATE 2 : It's IE9 that this is being rendered incorrectly in. And ONLY for Gmail.
更新 2 ：这是在 IE9 中错误呈现的。并且仅适用于 Gmail。
采纳答案by Andrew
Your problem is that the border is on the table itself. You tend to find that the email clients don't like that. The way that I got around it was by placing tables within tables a bit like this:
你的问题是边框在桌子上。您往往会发现电子邮件客户不喜欢那样。我绕过它的方法是在表格中放置表格，有点像这样：
<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>
Here is the code on a: jsfiddleI have created 2 different ways to get a similar effect. You can choose the one that works best for yourself.
下面是代码：jsfiddle我已经创建了 2 种不同的方法来获得类似的效果。您可以选择最适合自己的一种。
I also see that you have used max-width which some email clients dont like so that might be your problem. here is the campaignmonitor guide to css classes and what you should and should not use: http://www.campaignmonitor.com/css/
我还看到您使用了某些电子邮件客户端不喜欢的 max-width，所以这可能是您的问题。这是关于 css 类的活动监视器指南以及您应该和不应该使用的内容：http: //www.campaignmonitor.com/css/
回答by Eoin
I use the following on a table in my email and have no issues.
我在电子邮件中的表格上使用了以下内容，没有任何问题。
border-left: 2px #000000 solid;border-right: 2px #000000 solid;
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
我已经在多个浏览器和电子邮件客户端中进行了测试。确保您的样式是内联的，确保您在任何外部表上都没有不同的边框，因为 Outlook 等似乎是从父表继承的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;">
我在使用 IE9 和 Gmail 时遇到的问题是它呈现了我的电子邮件的响应版本，因此请检查您的媒体查询。解决这个问题的方法是添加 CSS 所以如果你有<td width="600">你需要确保它变成<td width="600" style="width:600px;">
