html电子邮件中的边框不'；在outlook 2010中未显示，但在Thunderbird中工作

我的html电子邮件中有以下代码。。它位于表字段中：

<span class=solid style="width:100%;height:5px;border-top:1px solid #f89d30;display:inline-block;"></span>

现在，当发送给Thunderbird时，这条“橙色线”确实会出现在html电子邮件中，但使用Outlook 2010的收件人看不到这条线

是的，我知道还有另一个线程，但我尝试了那个解决方案（我看到的唯一区别是我使用了display:block而不是display:inline block；）。。但它不起作用

还有其他建议吗

表:

<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>&nbsp;
    </td><td style="font-size: 10px;" nowrap valign=top><h2 style="margin:0;">Vitamin C </h2></td>
<td nowrap valign=top>$39.95</td>
<td nowrap valign=top><input type="text" name="qty1" value="3"  size=2 readonly=readonly></td>
<td nowrap valign=top>$1.00&nbsp;&nbsp;</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>$1.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>&nbsp;</td>
<td colspan=2>[checkout]</td></tr></table>

项目说明
价格
量
小计
维生素C
$39.95
$1.00  
订单小计$1.00
[结帐]

这可能不是一个完整的答案，因为我无法访问outlook 2010客户端（请参见下面的编辑），但以下是我的最佳尝试：

因此，outlook 2010不支持显示样式属性

由于

是一个内联元素，而且

display

在outlook 2010中不起作用，因此在outlook 2010中可能不支持为内联元素提供边框。尝试将其切换到

div

（或者更好，将边框顶部样式置于

tr

/

td

）

e、 g

编辑：刚刚在outlook 2010上进行了测试，但没有成功。

---

我在outlook中一直使用的是高度为1px的

tr

和

td

，没有填充或边距/间距，以及1px清晰的像素图像（或

和非常小的字体大小）

似乎可以将边框放在td上，而不是跨度上，这在OL 2010中是有效的。 我补充说：

---

在TD中使用了包含跨距的跨距，完全删除了跨距并替换为，现在它在浏览器中的外观与在浏览器中的外观相同（与原始html相同）。

@Malachi您还需要为

所以

---

gif的存在纯粹是为了使TD正常工作并将其固定到正确的高度。背景图像并不总是受支持的，因此使用IMG更安全，它之所以透明是因为您在TD上使用了背景颜色，图像纯粹是为了固定高度。

当表格没有出现在电子邮件中时

我花了很多时间研究，最后我找到了解决办法

在这里，我留下了一个在Outlook电子邮件和iMac邮件中为我服务的代码

要显示表格，请执行以下操作：

<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10"  align="center" width="800">
</table >

---

我希望它能为您服务。

显示表格标记为什么不使用div而不是span作为块元素的样式？@Jawad:刚刚完成。@eranmandan:这会有什么不同？。。奇怪的是，div默认是一个block元素，我们都知道Outlook喜欢忽略CSS，所以万一它不能很好地处理display:block-on-span，那么就少了一件可以排除的事情我试过了，但也没用。。对于Outlook2010。我只想设计

，我认为这在大多数情况下都有效。欢迎使用堆栈溢出！请用英语写下你的答案，因为@Lyovo:你的代码格式很差，所以我按照我认为是你的初衷编辑了它。我还修正了一些明显的错误。请检查一下，以防我出错。我将此添加到我的代码中，但在最新的Outlook（我使用Office 365获得的客户端）上似乎不起作用。colspan不适用于所有电子邮件客户端，即使在Outlook中也是如此。嗯，也许这在6年前有所不同，但我从未注意到问题，但是，如果可以避免的话，我也不会使用colspan，因为我发现它会导致各种各样的问题，甚至在电子邮件之外。在任何情况下，示例都不需要它，因此我将删除它。

.solid1 {border-top:1px solid #f89d30;}
.dashed1 {border-top:1px dashed #f89d30;}

<td bgcolor="#da5903" style="height:5px;">
  <img src="mydomain.com/orangepixel.gif" alt="" />

<table rules="all" bordercolor="#4d4c4d" border="1" bgcolor="#FFFFFF" cellpadding="10"  align="center" width="800">
</table >