2
我对电子邮件模板格式有一个非常明确的要求。我有以下模板，它从帮助台系统中提取属性。当用户/分析师回复时，我需要保留评论/说明的格式，但同时如果文本太宽，例如电子邮件链接，则要将其封装在特定大小内。下面的模板在IE中正常工作，但在Outlook中完全错误。这是Outlook呈现的电子邮件的正文。用于Outlook的HTML模板无法正常工作
<html>
<head>
<style type="text/css">
p,
td,
tr,
table {
font-family: Arial;
font-size: 12px;
text-align: center;
border-left: solid 0px border-right: solid 0px border-top: solid 0px border-bottom: solid 0px border: solid 0px
}
table,
td,
tr,
th {
border-collapse: collapse;
color: #FFF;
font-family: "Arial";
font-size: 14px;
}
.blacktextcentre {
font-family: "Arial";
font-size: 14px;
text-align: center;
color: #000;
}
.blacktextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
}
.whitetextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #fff;
}
.whitetextcentre {
font-family: "Arial";
text-align: center;
font-size: 16px;
color: #fff;
background-color: #A6A6A6;
}
.blacktextleftbold {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
font-weight: bold;
}
.blacktextrightbold {
font-family: "Arial";
text-align: right;
font-size: 14px;
color: #000;
font-weight: bold;
}
tr.border_bottom td {
border-bottom: 1pt solid black;
}
.blacktextcentreheading {
font-family: "Arial";
font-size: 40px;
text-align: center;
color: #000;
font-weight: bold;
}
.tableborder {
background-color: #007864;
}
pre.text {
white-space: pre-line;
width: 400px;
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
word-wrap: break-word;
}
img {
padding: 10px;
}
</style>
</head>
<table width="600" border="0" align="center">
<tr class="tableborder">
<td width="20" height="20"> </td>
<td width="10" height="20"> </td>
<td height="20"> </td>
<td width="10" height="20"> </td>
<td width="20" height="20"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="120"> </td>
<td>
<img src="logo" hspace="10" vspace="10">
</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Update</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">Dear Alex</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td class="blacktextleft"> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Summary</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height=""> </td>
<td>
<table width="100%" border="0" cellpadding="10">
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">ID:</td>
<td class="blacktextleft">IR1174</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Title:</td>
<td class="blacktextleft">Printer - Not Working</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Time Added:</td>
<td class="blacktextleft">31/05/2016 17:03:40</td>
</tr>
<tr>
<td width="90" class="blacktextrightbold">Comment:</td>
<td><pre class="text">cxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvv
vvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvv
vvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvv
cxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvv
vvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvv
vvvvvvvvvvvvvvvvvv</pre>
</td>
</tr>
</table>
</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Further Information</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">To update your ticket then please visit the <a HREF="server">portal</a> to provide an update or click on the link to <a HREF="mailto:address?subject=[IR1174]&body=">reply</a>.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Kind regards,</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Service Desk</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr class="tableborder">
<td width="20"> </td>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>如何保存格式，但保持一定宽度内的任何想法欢迎
这是Outlook如何使得它 
这是IE浏览器是如何呈现它以及它应该如何看待
这是pre.text类 
我已经把其变化在下面推荐的位置，这是什么回来： 
这是代码：
<html>
<head>
<style type="text/css">
p, td, tr, table {
font-family: Arial;
font-size: 12px;
text-align: center;
border-left: solid 0px
border-right: solid 0px
border-top: solid 0px
border-bottom: solid 0px
border: solid 0px
}
table, td, tr, th {
border-collapse: collapse;
color: #FFF;
font-family: "Arial";
font-size: 14px;
}
.blacktextcentre {
font-family: "Arial";
font-size: 14px;
text-align: center;
color: #000;
}
.blacktextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
}
.whitetextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #fff;
}
.whitetextcentre {
font-family: "Arial";
text-align: center;
font-size: 16px;
color: #fff;
background-color:#A6A6A6;
}
.blacktextleftbold {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
font-weight:bold;
}
.blacktextrightbold {
font-family: "Arial";
text-align: right;
font-size: 14px;
color: #000;
font-weight:bold;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
.blacktextcentreheading {
font-family: "Arial";
font-size: 40px;
text-align: center;
color: #000;
font-weight:bold;
}
.tableborder {
background-color:#007864;
}
pre.text{
white-space: pre-line;
width: 400px;
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
word-wrap: break-word;
}
img{
padding: 10px;
}
.master-table {
width:600px;
}
</style>
</head>
<table class="master-table">
<tr class="tableborder">
<td width="20" height="20"> </td>
<td width="10" height="20"> </td>
<td height="20"> </td>
<td width="10" height="20"> </td>
<td width="20" height="20"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="120"> </td>
<td><img src="https://link/Content/images/maillogo.jpg" hspace="10" vspace="10"></td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Update</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">Dear Alex</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td class="blacktextleft"> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Summary</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height=""> </td>
<td><table width="100%" border="0" cellpadding="10">
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">ID:</td>
<td class="blacktextleft">IR1174</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Title:</td>
<td class="blacktextleft">Printer - Not Working</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Time Added:</td>
<td class="blacktextleft">01/06/2016 09:16:20</td>
</tr>
<tr>
<td width="90" class="blacktextrightbold">Comment:</td>
<td><pre class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre></td>
</tr>
</table></td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Further Information</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">To update your ticket then please visit the <a HREF="https://server">portal</a> to provide an update or click on the link to <a HREF="mailto:[email protected]?subject=[IR1174]&body=">reply</a>.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Kind regards,</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Service Desk</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr class="tableborder">
<td width="20"> </td>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>
添加图片展示什么是对，什么是错的 –
谢谢，盲目寻找编辑按钮 – Alex
Outlook已知有问题，我会说确保你在表格上有固定的宽度。同时验证您的html和css https://validator.w3.org/ – R4nc1d