“Html表格边框”通过 Outlook 无法正确显示

Question

我有下面的 html，在任何 html 查看器上检查时显示正确的输出。

特别是表格边框显示正确。

但是当在 Outlook 中发送此输出的电子邮件时；表格边框混乱“仅适用于备用表格”，如图 2 所示

<style type="text/css">h1,                                  body {font-family: Arial, verdana;}                                  table{font-size:11px;                                  border-collapse:collapse; border:0px solid #F5F5EB;}                                  td{background-color:#F5F5EB;border:1px solid #E7E7CF;}                           div{text-align: right;}                           h5{font-weight: normal;}                            h4{font-weight: normal;margin-left: 0;}                                 th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style>        <H5><U>0-10 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_sapcus</td><td>pan</td><td>none</td><td><div>Aug 30 2011  6:03PM</div></td><td><div>Aug 30 2011  6:05PM</div></td><td><div>2</div></td><td><div>1395</div></td><td><div>3</div></td><td><div>46400</div></td></tr><tr><td>l_lirtagupdate</td><td>pan</td><td>none</td><td><div>Aug 31 2011  4:17AM</div></td><td><div>Aug 31 2011  4:21AM</div></td><td><div>4</div></td><td><div>781</div></td><td><div>5</div></td><td><div>15500</div></td></tr></table>
<style type="text/css">h1,                                  body {font-family: Arial, verdana;}                                  table{font-size:11px;                                  border-collapse:collapse; border:0px solid #F5F5EB;}                                  td{background-color:#F5F5EB;border:1px solid #E7E7CF;}                           div{text-align: right;}                           h5{font-weight: normal;}                            h4{font-weight: normal;margin-left: 0;}                                 th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style>        <H5><U>10-30 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>h_movsap</td><td>pan</td><td>none</td><td><div>Aug 31 2011  1:16AM</div></td><td><div>Aug 31 2011  1:40AM</div></td><td><div>24</div></td><td><div>962</div></td><td><div>20</div></td><td><div>4700</div></td></tr><tr><td>l_mslirdelta</td><td>pan</td><td>none</td><td><div>Aug 31 2011  4:03AM</div></td><td><div>Aug 31 2011  4:16AM</div></td><td><div>13</div></td><td><div>795</div></td><td><div>29</div></td><td><div>2600</div></td></tr><tr></table>
<style type="text/css">h1,                                  body {font-family: Arial, verdana;}                                  table{font-size:11px;                                  border-collapse:collapse; border:0px solid #F5F5EB;}                                  td{background-color:#F5F5EB;border:1px solid #E7E7CF;}                           div{text-align: right;}                           h5{font-weight: normal;}                            h4{font-weight: normal;margin-left: 0;}                                 th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style>        <H5><U>30-60 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_cogsap</td><td>pan</td><td>none</td><td><div>Aug 31 2011  3:33AM</div></td><td><div>Aug 31 2011  4:31AM</div></td><td><div>58</div></td><td><div>825</div></td><td><div>59</div></td><td><div>1200</div></td></tr><tr><td>c_lirtagsdaily</td><td>pan</td><td>none</td><td><div>Aug 31 2011  4:01AM</div></td><td><div>Aug 31 2011  4:22AM</div></td><td><div>21</div></td><td><div>797</div></td><td><div>39</div></td><td><div>1900</div></td></table><style type="text/css">h1,                                  body {font-family: Arial, verdana;}                                  table{font-size:11px;                                  border-collapse:collapse; border:0px solid #F5F5EB;}                                  td{background-color:#F5F5EB;border:1px solid #E7E7CF;}                           div{text-align: right;}                           h5{font-weight: normal;}                            h4{font-weight: normal;margin-left: 0;}                                 th{background-color:#666633; color: #FFFFFF; border-left: 1 px solid #E7E7CF;border-style: none}</style><style>H5 {font-family: Arial,verdana; color: #000000;}</style>        <H5><U>60-90 min Batch Job Group: Running longer than 100%</U><br></br><table><tr><th>JobName</th><th>GroupName</th><th>Parameters</th><th>StartTime</th><th>EndTime</th><th>Duration</th><th>DurationCurrent</th><th>DurationAvg</th><th>PercentLongerThanAverage</th><tr><td>l_mslbid</td><td>pan</td><td>none</td><td><div>Aug 30 2011  7:08PM</div></td><td><div>Aug 30 2011  8:21PM</div></td><td><div>73</div></td><td><div>1330</div></td><td><div>68</div></td><td><div>1800</div></td></tr><tr><td>l_mslir</td><td>pan</td><td>none</td><td><div>Aug 31 2011  5:01AM</div></td><td><div>Aug 31 2011  5:27AM</div></td><td><div>26</div></td><td><div>737</div></td><td><div>62</div></td><td><div>1000</div></td></tr></table>

Answer 1

我对此做了一些研究，结果发现 Outlook 的 HTML 渲染引擎已经相当过时了。如果您尝试发送基于 html 的电子邮件，请在此处找到一些指南：

http:// /groundwire.org/support/articles/css-and-email-newsletters/

http://www.codesurgeon.net/theblog/web/html-email-guidelines/

http://kb.mailchimp.com/article/how-to-code-html-emails/