Question

我已经附加了我想在MS Outlook 2007中显示的HTML代码。它在Chrome中运行良好，但是当涉及到Outlook时它无法正常工作。我怎样才能在outlook中完成这项工作？

我们可以使用替代代码/标签而不是我在这里使用的代码/标签，以使其在MS Outlook 2007中运行吗？如果是这样，请帮助我。

＆＃13;

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

＆＃13;

Answer 1

我如何在Outlook中完成这项工作？

您需要仔细阅读以下资源：Supported HTML Elements, Attributes, and Cascading Style Sheet Properties或Working with Outlook HTMLBody – a guide for Office developers。通过简要查看您的HTML代码以及Outlook允许的内容，您使用了许多不受支持的标记。例如：＆＃34;显示＆＃34;，＆＃34;溢出＆＃34;等。请清理HTML并使其与OUTLOOK能够呈现的内容兼容。您也可以使用在线Outlook HTML Email Online Validator。我不知道它有多准确，但这绝对是一个很好的开始方式。

我们可以使用替代代码/代码而不是我在此处使用的代码/代码，以使其在MS Outlook 2007中运行吗？

是的，这正是你应该做的。使用支持的CSS样式和HTML标记。

如果是这样，请帮助我。

这是你应该做的开发人员。这可能也是你付出的工作。所以只需根据提供的资源来做，不要指望有人会为你编写代码。

CSS样式和Jscript在MS Outlook 2007中没有正确反映

1 个答案: