Progress bar (Email)

Question

Tôi hiện đang phát triển một mẫu email.I cần để hiển thị một thanh tiến trình của phong cách này:

.progress { 
 
    width:100px; 
 
} 
 
.progressleft { 
 
    float: left; 
 
    height: 15px; 
 
} 
 
.progressright { 
 
    overflow: hidden; 
 
    height: 15px; 
 
}

<div style="position:relative;top: 20px; text-align:center; color:#ffffff;">50%</div> 
 
<div style="width:250px"> 
 
<div id="prog4" class="progressleft" style="width:50%;text-align:center;background-color: #f83;"></div> 
 
<div class="progressright" style="background-color: #ccc;"bgcolor="#ccc"></div>

Tuy nhiên, không có gì xuất hiện trên nhận được email với triển vọng .... Nhưng khi tôi mở email trong trình duyệt hiển thị tất cả một cách hoàn hảo ..

Cảm ơn bạn trước sự giúp đỡ của bạn ...

Answer 1

Bây giờ hãy thử định dạng bảng như thế này.

<table style="border:0;" cellpadding="0" cellspacing="0" width="250"> 
 
<tr> 
 
    <td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;"></td> 
 
    <td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;"></td> 
 
    </tr> 
 
</table>

Answer 2

Thực tế là Outlook sử dụng Word (không IE) để render HTML đánh dấu các email. Tất cả các phần tử HTML được hỗ trợ và không được hỗ trợ, các thuộc tính, và cascading style sheets thuộc tính được mô tả trong bài viết sau trong MSDN:

• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Hy vọng bạn sẽ tìm thấy những bài viết này hữu ích.