CSS样式和Jscript在MS Outlook 2007中没有正确反映 [英] CSS style and Jscript is not reflecting properly in MS outlook 2007
问题描述
我已经附加了我想在MS Outlook 2007中显示的HTML代码。它在Chrome中运行良好，但是当涉及到Outlook时它无法正常工作。我怎样才能在Outlook中完成这项工作？
I have attached the HTML code that i am trying to display in MS outlook 2007. It workes fine in Chrome, but when it comes to outlook its not working properly. How can i make this work in outlook ?
我们可以使用替代代码/标签而不是我在这里使用的代码/标签，以使其在MS Outlook 2007中运行吗？如果是这样，请帮助我。
Can we use an alternative codes/tags instead of the one i used here, to make it work in MS outlook 2007 ? If so, please help me with it.
<!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中完成这项工作？
How can i make this work in outlook ?
您需要阅读以下资源：支持的HTML元素，属性和层叠样式表属性或工作使用Outlook HTMLBody - Office开发人员指南。通过简要查看您的HTML代码以及Outlook允许的内容，您使用了许多不受支持的标记。例如：display，overflow等。请清理HTML并使其与OUTLOOK能够呈现的内容兼容。您也可以使用在线 Outlook HTML电子邮件在线验证器。我不知道它有多精确，但这绝对是一个很好的开始方式。
You need to read through the following resource: Supported HTML Elements, Attributes, and Cascading Style Sheet Properties or Working with Outlook HTMLBody – a guide for Office developers. By briefly looking at your HTML code and what Outlook would allow, there a lot of unsupported tags you are using. For example: "display", "overflow", etc. Please clean up your HTML and make it compatible with what OUTLOOK able to render. You may also use available online Outlook HTML Email Online Validator. I am not aware how accurate it is, but this is definitely good way to start.
我们可以使用替代代码/标签代替我在这里使用的那个，使它在MS Outlook 2007中工作？
Can we use an alternative codes/tags instead of the one i used here, to make it work in MS outlook 2007 ?
是的，这正是你应该做的。使用支持的CSS样式和HTML标记。
Yes, this is exactly what you should do. Use supported CSS styles and HTML tags.
如果有，请帮助我。
If so, please help me with it.
这是你应该做的开发人员。这可能也是你付出的工作。所以只需根据提供的资源来做，不要指望有人会为你编写代码。
This is what you should do as developer. This is probably the work you are paid for as well. So simply do it according the resource provided, do not expect somebody would write the code for you.
这篇关于CSS样式和Jscript在MS Outlook 2007中没有正确反映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
