html 电子邮件中的边框在 Outlook 2010 中不显示，但在 Thunderbird 中有效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18775413/
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
border in html email doesn't show up in outlook 2010, but works in Thunderbird
提问by Malachi
I have the following code in my html email.. it's inside a table field:
我的 html 电子邮件中有以下代码..它在表字段中：
<span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span>
Now, this 'orange line' does show up in html email when it's send to Thunderbird, but a recipient that uses Outlook 2010 doesn't see the line.
现在，这条“橙色线”在发送到 Thunderbird 时确实会显示在 html 电子邮件中，但使用 Outlook 2010 的收件人看不到该线。
And yes, I know there is another thread about this, but I tried that solution (only difference I saw was that I had display:block instead of display:inline-block;).. and it didn't work.
是的，我知道还有另一个线程关于这个，但我尝试了那个解决方案（我看到的唯一区别是我有 display:block 而不是 display:inline-block;）。但它没有用。
Any other suggestions?
还有其他建议吗？
table:
桌子：
<table border=0 cellpadding=5 cellspacing=0 style="font:300 15px/1.625 'Helvetica Neue',Helvetica,Arial,sans-serif">
<tr><td colspan=5><span class=solid style="width:100%;height:1px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td nowrap style="font-size:12px;" colspan=2>Item Description</td>
<td width=50 nowrap style="font-size:12px;">Price</td>
<td width=50 style="font-size:12px;">Quantity</td>
<td width=50 nowrap style="font-size:12px;">Sub Total</td>
</tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr>
<td valign=top>
</td><td style="font-size: 10px;" nowrap valign=top><h2 style="margin:0;">Vitamin C </h2></td>
<td nowrap valign=top>.95</td>
<td nowrap valign=top><input type="text" name="qty1" value="3" size=2 readonly=readonly></td>
<td nowrap valign=top>.00 </td></tr><tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:block;"></span></td></tr>
<tr><td colspan=4>Order Subtotal</td><td>.00</td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px dashed #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3></td><td colspan=2><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=5><span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span></td></tr>
<tr><td colspan=3> </td>
<td colspan=2>[checkout]</td></tr></table>
回答by Lyovo Graphics
When the table does not appear in the emails.
当表格未出现在电子邮件中时。
I spent a lot of time researching and in the end I found the solution.
我花了很多时间研究，最后我找到了解决方案。
Here I leave a code that has served me in Outlook emails and iMac Mail.
在这里，我留下了一个在 Outlook 电子邮件和 iMac 邮件中为我服务的代码。
To show the table:
要显示表格：
<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10" align="center" width="800">
</table >
I hope it serves you.
我希望它为你服务。
回答by Eoin
@Malachi you also need to include a background colour for your <td>
@Malachi 您还需要为您的 <td>
so
所以
<td bgcolor="#da5903" style="height:5px;" colspan="5">
<img src="mydomain.com/orangepixel.gif" alt="" />
The gif is there purely to make the TD behave and fix to the right height. Background images are not always supported, so it is safer to use an IMG, the reason it is transparent is because you use the background colour on the TD, the image is purely to fix the height.
gif 的存在纯粹是为了让 TD 表现并固定到正确的高度。背景图片并不总是支持，所以使用IMG更安全，它透明的原因是因为你在TD上使用背景颜色，图像纯粹是为了固定高度。
回答by Eran Medan
This might not be a complete answer, as I don't have access to an outlook 2010 client (see edit below), but here is my best attempt:
这可能不是一个完整的答案，因为我无法访问 Outlook 2010 客户端（请参阅下面的编辑），但这是我的最佳尝试：
According to this, the displaystyle property is not supported in outlook 2010:
据此display，Outlook 2010 不支持 style 属性：
Since <span>is an inline element, and since displaydoesn't work in outlook 2010, then giving an inline element a border might not be supported in outlook 2010. Try to switch it to a div(or better, put the border-top style on the tr/ td)
由于<span>是内联元素，并且display在 Outlook 2010 中不起作用，因此 Outlook 2010 可能不支持为内联元素设置边框。尝试将其切换为 a div（或更好，将边框顶部样式放在tr/ td)
e.g.
例如
<tr><td colspan="5"><div class="solid" style="width:100%;height:1px;border-top:1px solid #f89d30;"></div></td></tr>
EDIT:just tested it on outlook 2010, it didn't do the trick.
What always worked for me for outlook, is to use a trand tdwith height 1px, no padding or margin / spacing, and a 1px clear pixel image (or  and a very small font size)
编辑：刚刚在 Outlook 2010 上对其进行了测试，但没有成功。屡试不爽什么我要展望，是使用tr和td随高度1px的，没有填充或保证金/间距，以及1px的清晰像素的图像（或者 和一个非常小的字体大小）
回答by Jon B
It seems you could put the border on the TD instead of the SPAN, that works in OL 2010. I added:
看来您可以将边框放在 TD 而不是 SPAN 上，这适用于 OL 2010。我补充说：
.solid1 {border-top:1px solid #f89d30;}
.dashed1 {border-top:1px dashed #f89d30;}
used those in the TD that encloses the span, deleted the spans completely and replaced them with and now it looks the same in outlookas it does in browser (and the same as your original html).
使用包含跨度的 TD 中的那些，完全删除跨度并将其替换为 现在它在Outlook 中看起来和在浏览器中一样（和你原来的 html 一样）。
