3

Outlook2010でのHTML/CSSレンダリングに問題があります。

以下のHTMLは、私がテストした他のすべての電子メールクライアント（Thunderbird、Outlook 2003、iPhone、さまざまなWebメールベースの製品）、およびさまざまなブラウザーでも正しくレンダリングされます。しかし、Outlook 2010では、テーブルのキャプションの周囲に、その下のタグの背景と同じ色の境界線が表示されます。

Outlook2010のキャプション付きの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をファイルに保存して、同じレンダリングエンジンを使用するWord2010に読み込むことができます。

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 に答える