biên giới trong email html không hiển thị trong Outlook 2010, nhưng hoạt động trong Thunderbird

Question

Tôi có đoạn mã sau vào email html của tôi .. nó bên trong một lĩnh vực bảng:

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

Bây giờ, điều này 'dòng cam 'không hiển thị trong email html khi nó gửi đến Thunderbird, nhưng người nhận sử dụng Outlook 2010 không thấy dòng. Và có, tôi biết có một chủ đề khác về điều này, nhưng tôi đã thử giải pháp đó (chỉ khác biệt tôi thấy là tôi đã hiển thị: khối thay vì hiển thị: inline-block;) .. và nó không hoạt động .

Bất kỳ đề xuất nào khác?

bảng:

<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

Điều này có thể không phải là một câu trả lời hoàn chỉnh, như tôi không có quyền truy cập vào một ứng dụng Outlook 2010 (xem chỉnh sửa dưới đây), nhưng đây là nỗ lực hết sức mình:

theo đó, tài sản display phong cách không được hỗ trợ trong triển vọng 2010:

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

Kể từ <span> là một phần tử nội tuyến và vì display không hoạt động trong triển vọng 2010, sau đó cung cấp cho phần tử nội tuyến một đường viền có thể không được hỗ trợ trong triển vọng 2010. Hãy thử chuyển đổi thành div (hoặc tốt hơn, đặt kiểu đường viền trên số tr/td)

ví dụ

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

EDIT: chỉ thử nghiệm nó trên Outlook 2010, nó đã không làm các trick. gì luôn luôn làm việc cho tôi cho triển vọng, là sử dụng một tr và td với chiều cao 1px, không có đệm hoặc lợi nhuận/khoảng cách, và một 1px hình ảnh điểm ảnh rõ ràng (hoặc &nbsp và một cỡ chữ rất nhỏ)

Answer 2

sử dụng trang web này để kiểm tra cách email của bạn trông trong các khách hàng khác nhau, các trình duyệt và các thiết bị https://litmus.com/email-testing

Answer 3

dường như bạn có thể đặt biên giới trên TD thay vì SPAN, mà làm việc trong CV 2010. tôi nói thêm:

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

được sử dụng trong TD bao quanh nhịp, xóa hoàn toàn các nhịp và thay thế chúng bằng & nbsp; và bây giờ nó trông giống nhau trong outlook giống như trong trình duyệt (và giống như html gốc của bạn).

Answer 4

@Malachi bạn cũng cần phải bao gồm một màu nền cho bạn <td>

nên

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

Các gif là có hoàn toàn để tạo một hành vi TD và sửa chữa với chiều cao đúng. Hình nền không phải lúc nào cũng được hỗ trợ, vì vậy an toàn hơn khi sử dụng IMG, lý do nó minh bạch là vì bạn sử dụng màu nền trên TD, hình ảnh hoàn toàn là sửa chiều cao.

Answer 5

Khi bảng không xuất hiện trong email.

Tôi đã dành rất nhiều thời gian nghiên cứu và cuối cùng tôi đã tìm ra giải pháp.

Ở đây tôi để lại mã đã phục vụ tôi trong email Outlook và iMac Mail.

Để hiển thị bảng:

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

Tôi hy vọng nó phục vụ bạn.