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