0
我附加了我试图在MS Outlook 2007中显示的HTML代码。它在Chrome中工作正常，但是当涉及到Outlook时它无法正常工作。我如何在Outlook中做这项工作？CSS样式和Jscript在MS Outlook 2007中没有正确反映
我们可以使用替代代码/标签而不是我在这里使用的代码/标签，以使其在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") {
\t document.getElementById("1").style.backgroundColor = "#81C5F1";
\t document.getElementById("2").style.backgroundColor = "#f0f0f0";
\t document.getElementById("3").style.backgroundColor = "#f0f0f0";
\t document.getElementById("4").style.backgroundColor = "#f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Cart") {
\t document.getElementById("1").style.backgroundColor = "#81C5F1";
\t document.getElementById("2").style.backgroundColor = "#f0f0f0";
\t document.getElementById("3").style.backgroundColor = "#f0f0f0";
\t document.getElementById("4").style.backgroundColor = "#f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Review") {
\t document.getElementById("1").style.backgroundColor = "#81C5F1";
\t document.getElementById("2").style.backgroundColor = "#f0f0f0";
\t document.getElementById("3").style.backgroundColor = "#f0f0f0";
\t document.getElementById("4").style.backgroundColor = "#f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Submitted") {
\t document.getElementById("1").style.backgroundColor = "#81C5F1";
\t document.getElementById("2").style.backgroundColor = "#f0f0f0";
\t document.getElementById("3").style.backgroundColor = "#f0f0f0";
\t document.getElementById("4").style.backgroundColor = "#f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Waiting Approval") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#81C5F1";
\t document.getElementById("3").style.backgroundColor = "f0f0f0";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Pending") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#77E765";
\t document.getElementById("3").style.backgroundColor = "#81C5F1";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Planning") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#77E765";
\t document.getElementById("3").style.backgroundColor = "#81C5F1";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "In Progress") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#77E765";
\t document.getElementById("3").style.backgroundColor = "#81C5F1";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Completed") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#77E765";
\t document.getElementById("3").style.backgroundColor = "#77E765";
\t document.getElementById("4").style.backgroundColor = "#81C5F1";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Closed") {
\t document.getElementById("1").style.backgroundColor = "#77E765";
\t document.getElementById("2").style.backgroundColor = "#77E765";
\t document.getElementById("3").style.backgroundColor = "#77E765";
\t document.getElementById("4").style.backgroundColor = "#81C5F1";
\t document.getElementById("5").style.backgroundColor = "f0f0f0";
}
if (firstName === "Rejected") {
\t document.getElementById("1").style.backgroundColor = "f0f0f0";
\t document.getElementById("2").style.backgroundColor = "f0f0f0";
\t document.getElementById("3").style.backgroundColor = "f0f0f0";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "#F74141";
}
if (firstName === "Cancelled") {
\t document.getElementById("1").style.backgroundColor = "f0f0f0";
\t document.getElementById("2").style.backgroundColor = "f0f0f0";
\t document.getElementById("3").style.backgroundColor = "f0f0f0";
\t document.getElementById("4").style.backgroundColor = "f0f0f0";
\t document.getElementById("5").style.backgroundColor = "#F74141";
}
</script>
</body>
</html>