进度条（电子邮件）

Question

我正在开发一个模板email.I需要显示这种风格的进度条:

.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>

但是outlook收到的邮件没有任何显示....但是当我在浏览器中打开邮件时显示完美..

预先感谢您的帮助...

Answer 1

现在尝试table这样格式化。

<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

事实是 Outlook 使用 Word（而非 IE）呈现电子邮件的 HTML 标记。所有受支持和不受支持的 HTML 元素、属性和级联样式表属性均在 MSDN 中的以下文章中进行了描述：

希望这些文章对您有所帮助。

进度条（电子邮件）

Progress bar (Email)

html

css

email

outlook

progress-bar