Question

我在Outlook 2010中遇到HTML / CSS呈现问题。

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

HTML table with caption in Outlook 2010

<!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中，因为它使用相同的渲染引擎。

Answer 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>

Answer 2

<!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>

背景显示不正确作为表标题的边框

2 个答案: