我已附上我试图在 MS Outlook 2007 中显示的 HTML 代码。它在 Chrome 中工作正常，但在 Outlook 中则无法正常工作。我怎样才能在 Outlook 中实现此功能？
我们可以使用替代代码/标签来代替我在这里使用的代码/标签，以使其在 MS Outlook 2007 中工作吗？如果是这样，请帮我解决一下。
<!DOCTYPE html>
<html>
<body>
<div>
<ol class="track-progress" data-steps="3">
<li id="1">
<span style="color:Black;font-weight:bold;font-size:70%">Submission</span>
<i></i>
</li><!--
--><li id="2">
<span style="color:Black;font-weight:bold;font-size:70%">Approval</span>
</li><!--
--><li id="3">
<span style="color:Black;font-weight:bold;font-size:70%">Implementation</span>
</li><!--
--><li id="4">
<span style="color:Black;font-weight:bold;font-size:70%">Completed</span>
<i></i>
</li><!--
--><li id="5">
<span style="color:Black;font-weight:bold;font-size:70%">Rejected</span>
<i></i>
</li>
</ol></div>
<style>
.track-progress li > span {
display: block;
color: #0000;
//font-weight: bold;
//text-transform: uppercase;
}
.track-progress li > span:after,
.track-progress li > span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 15px;
}
.track-progress li > span:after {
top: -5px;
z-index: 1;
border-left-color: white;
border-width: 20px;
}
.track-progress li > span:before {
z-index: 2;
}
.track-progress li.done + li > span:before {
border-left-color: #19832f;
}
.track-progress li.ongoing + li > span:before {
border-left-color: #24d347;
}
.track-progress li:first-child > span:after,
.track-progress li:first-child > span:before {
display: none;
}
.track-progress[data-steps="3"] li { width: 15%; }
.track-progress[data-steps="4"] li { width: 25%; }
.track-progress[data-steps="5"] li { width: 20%; }
.track-progress {
margin: 0;
padding: 0;
overflow: hidden;
}
.track-progress li:first-child i,
.track-progress li:last-child i {
display: block;
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 15px;
}
.track-progress li:last-child i {
left: auto;
right: -15px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
.track-progress li {
list-style-type: none;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
text-align: center;
line-height: 30px;
height: 30px;
background-color: #f0f0f0;
}
</style>
<script>
var firstName = "Planning";
if (firstName === "Draft") {
document.getElementById("1").style.backgroundColor = "#81C5F1";
document.getElementById("2").style.backgroundColor = "#f0f0f0";
document.getElementById("3").style.backgroundColor = "#f0f0f0";
document.getElementById("4").style.backgroundColor = "#f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Cart") {
document.getElementById("1").style.backgroundColor = "#81C5F1";
document.getElementById("2").style.backgroundColor = "#f0f0f0";
document.getElementById("3").style.backgroundColor = "#f0f0f0";
document.getElementById("4").style.backgroundColor = "#f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Review") {
document.getElementById("1").style.backgroundColor = "#81C5F1";
document.getElementById("2").style.backgroundColor = "#f0f0f0";
document.getElementById("3").style.backgroundColor = "#f0f0f0";
document.getElementById("4").style.backgroundColor = "#f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Submitted") {
document.getElementById("1").style.backgroundColor = "#81C5F1";
document.getElementById("2").style.backgroundColor = "#f0f0f0";
document.getElementById("3").style.backgroundColor = "#f0f0f0";
document.getElementById("4").style.backgroundColor = "#f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Waiting Approval") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#81C5F1";
document.getElementById("3").style.backgroundColor = "f0f0f0";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Pending") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#77E765";
document.getElementById("3").style.backgroundColor = "#81C5F1";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Planning") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#77E765";
document.getElementById("3").style.backgroundColor = "#81C5F1";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Progress") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#77E765";
document.getElementById("3").style.backgroundColor = "#81C5F1";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Completed") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#77E765";
document.getElementById("3").style.backgroundColor = "#77E765";
document.getElementById("4").style.backgroundColor = "#81C5F1";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Closed") {
document.getElementById("1").style.backgroundColor = "#77E765";
document.getElementById("2").style.backgroundColor = "#77E765";
document.getElementById("3").style.backgroundColor = "#77E765";
document.getElementById("4").style.backgroundColor = "#81C5F1";
document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Rejected") {
document.getElementById("1").style.backgroundColor = "f0f0f0";
document.getElementById("2").style.backgroundColor = "f0f0f0";
document.getElementById("3").style.backgroundColor = "f0f0f0";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "#F74141";
}
if (firstName === "Cancelled") {
document.getElementById("1").style.backgroundColor = "f0f0f0";
document.getElementById("2").style.backgroundColor = "f0f0f0";
document.getElementById("3").style.backgroundColor = "f0f0f0";
document.getElementById("4").style.backgroundColor = "f0f0f0";
document.getElementById("5").style.backgroundColor = "#F74141";
}
</script>
</body>
</html>
我怎样才能在 Outlook 中实现此功能？
您需要阅读以下资源：支持的 HTML 元素、属性和级联样式表属性 https://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx#Supported%20HTML%20Elements,%20Attributes,%20and%20Cascading%20Style%20Sheet%20Properties or 使用 Outlook HTMLBody – Office 开发人员指南 https://www.add-in-express.com/creating-addins-blog/2015/02/23/outlook-htmlbody-guide/。通过简要查看您的 HTML 代码以及 Outlook 允许的内容，您会发现您正在使用许多不受支持的标签。例如：“显示”、“溢出”等。请清理您的 HTML 并使其与 OUTLOOK 能够呈现的内容兼容。您也可以使用在线提供的Outlook HTML 电子邮件在线验证器 http://jonathanaquino.com/outlook-html-email-validator.php。我不知道它有多准确，但这绝对是一个很好的开始方式。
我们可以使用替代代码/标签来代替我在这里使用的代码/标签，以使其在 MS Outlook 2007 中工作吗？
是的，这正是您应该做的。使用受支持的 CSS 样式和 HTML 标签。
如果是这样，请帮我解决一下。
这是作为开发人员应该做的。这可能也是您获得报酬的工作。因此，只需根据提供的资源进行操作即可，不要指望有人会为您编写代码。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
