3

我在 Outlook 2010 中遇到 HTML/CSS 渲染问题。

下面的 HTML 在我测试过的所有其他电子邮件客户端（Thunderbird、Outlook 2003、iPhone、各种基于网络邮件的产品）以及各种浏览器中都能正确呈现。但在 Outlook 2010 中，表格标题周围有一个边框，该边框与它下方标签的背景颜色相同。

Outlook 2010 中带有标题的 HTML 表格 

<!DOCTYPE html>
<html>
<body>
  <div style="padding: 0.3em">
    <p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
    <hr />

    <table style=" width: auto; color: #000; border: 1px solid #000; border-collapse: collapse; background: #FFF;">
      <caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
      <tr>
        <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Filename</th>
        <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Size</th>
      </tr>

      <tr>
        <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;">6315755363_7fbe95fc66_o.jpg</td>
        <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;">5 MB</td>
      </tr>

    </table>

    <p>Please <a href="https://********/message/Hreh4oqPUR9ctdJ59Nkm4N">click here</a> to download the attachments.</p>

    <p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
    <hr />
  </div>


</body>
</html>

任何人都可以建议解决此问题吗？

编辑

如果您想对此进行调试，您可以将 HTML 保存在一个文件中并将其加载到 Word 2010 中，因为它使用相同的渲染引擎。

4

2 回答 2

1

尝试在之后添加幻像行<caption>

<caption style=" font-style: italic; text-align: left; color: #000; background: #FFF;">Files attached to this message</caption>
<tr style="background:#FFF; display:none;"></tr> <!--phantom row-->
<tr>
    <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Filename</th>
    <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Size</th>
</tr>
于 2012-12-06T17:12:38.733 回答
0 
<!DOCTYPE html>
<html>
<body>
  <div style="padding: 0.3em">
    <p>Here is a nice background from St Pancras Station with the Olympic Rings in the background</p>
    <hr />
    <table style=" width: auto; color: #000;  border-collapse: collapse;">
        <tr>
            <td style="border: 1px solid #fff; border-bottom-color: #000; background: #fff; text-align: left; vertical-align: top;">
                <caption style=" font-style: italic; text-align: left; color: #000;">Files attached to this message</caption>
            </td>
        </tr>
        <tr>
        <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Filename</th>
        <th style="border: 1px solid #000; padding: 0.3em; background: #ddd;  text-align: left; vertical-align: top;">Size</th>
      </tr>

      <tr>
        <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 75%;background: #FFF;">6315755363_7fbe95fc66_o.jpg</td>
        <td style="border: 1px solid #000; padding: 0.3em; text-align: left; vertical-align: top; width: 25%;background: #FFF;">5 MB</td>
      </tr>

    </table>

    <p>Please <a href="https://********/message/Hreh4oqPUR9ctdJ59Nkm4N">click here</a> to download the attachments.</p>

    <p>The attachments are available until: <b>Tuesday, 11 December.</b></p>
    <hr />
  </div>
</body>
</html>
于 2012-12-06T17:07:58.310 回答