5

我的 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>
4

4 回答 4

6

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.

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.

于 2018-01-25T08:26:49.717 回答
1

@Malachi you also need to include a background colour for your <td>

so

<td bgcolor="#da5903" style="height:5px;">
  <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.

于 2014-12-08T18:50:38.627 回答
1

看来您可以将边界放在 TD 而不是 SPAN 上，这在 OL 2010 中有效。我补充说：

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

使用 TD 中包含跨度的那些，完全删除跨度并用   替换它们 现在它在Outlook中的外观与在浏览器中的外观相同（并且与您的原始 html 相同）。

于 2013-09-24T18:05:06.200 回答
0

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

据此，displayoutlook 2010 不支持 style 属性：

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)

例如

 <tr><td colspan="5"><div class="solid" style="width:100%;height:1px;border-top:1px solid #f89d30;"></div></td></tr>

编辑：刚刚在 Outlook 2010 上对其进行了测试，但没有奏效。对我来说，Outlook 一直有效的方法是使用高度为 1 像素的tr和td，没有填充或边距/间距，以及 1 像素的清晰像素图像（或&nbsp非常小的字体大小）

于 2013-09-12T23:57:28.573 回答