进度条（电子邮件）答案

【问题标题】：Progress bar (Email)进度条（电子邮件）
【发布时间】：2015-09-13 08:18:11
【问题描述】：

我目前正在开发一个模板电子邮件。我需要显示这种样式的进度条：

.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 的电子邮件时，什么都没有出现..但是当我在浏览器中打开电子邮件时，一切都完美显示..

提前感谢您的帮助...

【问题讨论】：

float 在电子邮件中不起作用。浮点数应替换为align="left"，您应该研究如何编写电子邮件，div 应替换为表格元素，您的类应添加为属性选择器 [class=progress]

标签： html css email outlook progress-bar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

现在尝试像这样格式化表格。

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

【讨论】：

并且可以做一个圆形的进度条兼容email吗？
最好的选择是创建一个图像并用于跨电子邮件模板的电子邮件模板，也用于表格格式。
为什么要在电子邮件中使用浮点数？特别是在 td 上？
因为有些邮件默认的 td 高度比你定义的要高
谢谢你确实依靠更多的图像。我根据百分比显示图像。