Outlook模板无法正常工作

时间:2016-05-31 16:18:46

标签: html css outlook html-email

我对电子邮件模板格式有一个非常具体的要求。我有以下模板从服务台系统中提取属性。当用户/分析师回复时,我需要保留评论/描述的格式,但同时如果文本太宽,例如电子邮件链接,则将其包装在特定大小内。下面的模板在IE中工作正常,但在outlook中完全错误。这是outlook所呈现的电子邮件正文。



<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">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td height="20">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td width="20" height="20">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="120">&nbsp;</td>
    <td>
      <img src="logo" hspace="10" vspace="10">
    </td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Update</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">Dear Alex</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="10">&nbsp;</td>
    <td class="blacktextleft">&nbsp;</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Summary</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Further Information</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Kind regards,</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Service Desk</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr class="tableborder">
    <td width="20">&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
</body>

</html>
&#13;
&#13;
&#13;

有关如何保留格式但保持特定宽度欢迎的任何想法

这就是outlook呈现它的方式 Error

这是IE呈现它的方式以及它应该如何显示

enter image description here

这是pre.text类的位置 enter image description here

我已经进行了下面推荐的更改,这就是回来的内容: enter image description here

这是代码:

&#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">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td height="20">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td width="20" height="20">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="120">&nbsp;</td>
    <td><img src="https://link/Content/images/maillogo.jpg" hspace="10" vspace="10"></td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Update</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">Dear Alex</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="10">&nbsp;</td>
    <td class="blacktextleft">&nbsp;</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Summary</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Further Information</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Kind regards,</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Service Desk</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr class="tableborder">
    <td width="20">&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
</body>
</html>
&#13;
&#13;
&#13;

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)

我想我已经破解了它。通过固定包含预截面的子表的宽度,它现在表现为:

enter image description here

代码:

<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">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td height="20">&nbsp;</td>
    <td width="10" height="20">&nbsp;</td>
    <td width="20" height="20">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="120">&nbsp;</td>
    <td><img src="https://web/maillogo.jpg" hspace="10" vspace="10"></td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Update</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">Dear Alex</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Ticket Summary</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</td>
    <td class="whitetextcentre">Further Information</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="35">&nbsp;</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>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Kind regards,</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr>
    <td class="tableborder">&nbsp;</td>
    <td height="30">&nbsp;</td>
    <td class="blacktextcentre">Service Desk</td>
    <td>&nbsp;</td>
    <td class="tableborder">&nbsp;</td>
  </tr>
  <tr class="tableborder">
    <td width="20">&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="10">&nbsp;</td>
    <td width="20">&nbsp;</td>
  </tr>
</table>
</body>
</html>