Question

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

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

现在，当发送给Thunderbird时，这条“橙色线”会显示在html电子邮件中，但是使用Outlook 2010的收件人看不到该行。

是的，我知道还有另一个关于此问题的线索，但我尝试了解决方案（我看到的唯一区别就是我显示了：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>

Answer 1

@Malachi您还需要为<td>

添加背景颜色

所以

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

gif纯粹是为了使TD表现并固定到正确的高度。背景图像并不总是受支持，因此使用IMG更安全，因为它是透明的，因为你在TD上使用背景颜色，图像纯粹是为了修复高度。

Answer 2

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

我花了很多时间研究，最后我找到了解决方案。

这里我留下了一个代码，该代码在Outlook电子邮件和iMac Mail中提供给我。

显示表格：

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

我希望它能为你服务。

Answer 3

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

根据这一点，Outlook 2010不支持display样式属性：

http://campaignmonitor.cachefly.net/assets/files/css/campaign-monitor-guide-to-css-in-email-jan-2013.pdf?ver=1252

由于<span>是内联元素，并且由于display在Outlook 2010中不起作用，因此Outlook 2010中可能不支持为内联元素提供边框。尝试将其切换为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>

编辑：刚刚在Outlook 2010上测试过，它没有做到这一点。对于我而言，对我来说总是有用的是使用高度为1px的tr和td，没有填充或边距/间距，以及1px清晰像素图像（或&nbsp和非常小字体）

Answer 4

似乎你可以把边框放在TD而不是SPAN上，这在OL 2010中有效。我补充说：

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

使用包含跨度的TD中的那些，完全删除了跨度并用＆amp; nbsp;替换它们。现在它在outlook中看起来与在浏览器中看起来相同（和原始html相同）。

HTML电子邮件中的边框不会出现在Outlook 2010中，但可以在Thunderbird中使用

4 个答案: