Outlook模板无法正常工作
我对电子邮件模板格式有一个非常具体的要求。我有以下模板从服务台系统中提取属性。当用户/分析师回复时，我需要保留评论/描述的格式，但同时如果文本太宽，例如电子邮件链接，则将其包装在特定大小内。下面的模板在IE中工作正常，但在outlook中完全错误。这是outlook所呈现的电子邮件正文。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<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类的位置
我已经进行了下面推荐的更改，这就是回来的内容：
这是代码：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<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:mail@mail.org?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>
3 个答案:
答案 0 :(得分：0)
将width属性应用于包含文本
的td-cell<td width="510"><pre class="text">blablabla</pre></td>
答案 1 :(得分：0)
尝试使用以下内容 您的文字需要换行符，正如我提到的验证您的css validator.w3.org
indicator = indicator.match(/[0-9]+/g);
答案 2 :(得分：0)
我想我已经破解了它。通过固定包含预截面的子表的宽度，它现在表现为：
代码：
<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;
padding:5px;
}
.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;
padding:5px;
}
.blacktextrightbold {
font-family: "Arial";
text-align: right;
font-size: 14px;
color: #000;
font-weight:bold;
padding:5px;
width:100px;
}
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.comment{
white-space: pre-line;
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
word-wrap: break-word;
width:440px;
}
img{
padding: 10px;
}
.master-table {
width:600px;
}
.subtable {
width:550px;
table-layout:fixed;
}
</style>
</head>
<body>
<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://web/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="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 class="subtable">
<tr class="border_bottom">
<td class="blacktextrightbold">ID:</td>
<td class="blacktextleft">IR1174</td>
</tr>
<tr class="border_bottom">
<td class="blacktextrightbold">Title:</td>
<td class="blacktextleft">Printer - Not Working</td>
</tr>
<tr class="border_bottom">
<td class="blacktextrightbold">Time Added:</td>
<td class="blacktextleft">01/06/2016 10:43:19</td>
</tr>
<tr>
<td class="blacktextrightbold">Comment:</td>
<td style="padding:5px; text-align:left;"><pre class="comment">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
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://link">portal</a> to provide an update or click on the link to <a HREF="mailto:mail@mail.org?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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？