html - Outlook 2007 で HTML メールが正しく表示されない

Question

長い時間をかけて研究に取り組みました。私はまだ答えを見つけることができません。

テーブルで間違った幅を表示している HTML があります。HTML メールへのリンクは次のとおりです。

主な問題は底部です。HTMLメールのリンクは正しく表示されます。ここから他に何をすべきかわかりません。問題が発生している下部のコードは次のとおりです。

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" colspan="3" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td><table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
                <tr>
                  <td width="28"></td>
                  <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.</td>
                      </tr>
                      <tr align="right">
                        <td height="40" valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table></td>
                  <td width="28"></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td><img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="573" height="57" /></td>
          </tr>
        </table></td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

  <!--Testimonial End--> 

  <!--Footer-->

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575"><table cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="295" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;"><a href="mailto:info@tagwebstore.com" style="color:#000000; text-decoration:none;">info@tagwebstore.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477</td>
            <td width="178" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">Follow us on Twitter &amp; YouTube</td>
            <td valign="middle" width="102"><a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" /></a><a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" /></a></td>
          </tr>
        </table></td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

  <!--Footer End--> 

含まれているテーブルの幅は 625px と想定されています。どんな助けでも大歓迎です。

Answer 1

ああ、HTMLメールの喜び

HTML ベースの電子メールを扱うとき、特に厳密なクライアントとピクセルパーフェクトなデザインを扱う場合には、従わなければならないルールがたくさんあります。少なくとも 2 年間、そのようなプロジェクトに取り組む必要がなかったことに非常に満足しています。今... 私がこの慣習を完全に嫌う主な理由は、主に 2 つの電子メール クライアントが原因です。最初で史上最悪なのは Lotus Notes 6.5.4 (公平を期すために、今では 10 年以上経っていますが..しかし、それでも!)であり、史上 2 番目に最悪なのは、悪い点でさえ最高ではありません。 Outlook 2007 および 2010!

Microsoft Word の WYSIWYG HTML エンジンを使用して Outlook 2007 および 2010 で HTML メールをレンダリングするのは良い考えだと思った人は誰でも、頭がおかしくなったり、怠惰だったり、迷ったり、少し混乱したりしたに違いありません (適宜削除してください)。通常、ランダムで不可解なサイズ計算やパディングの問題など、開発者にとってレンダリングの問題は尽きることがありません。

私のブログhttp://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-outlook.htmlから引用

簡単に言えば、私はあなたをうらやましくない:)

メールの問題を解決する最善の方法は、次のルールに従うことであることがわかりました。

1. colspansまたはを使用しないでくださいrowspans。
2. テーブルとセルには常に正しいサイズを設定してください。
3. ではなく、スペーサー gif を使用し&nbps;ます。
4. 常に正しい画像サイズを指定し、画像を拡大または縮小しないでください。
5. 常にstyle="display:block;"画像に追加します。
6. の使用は避けてくださいdivs。
7. リンクに色を付けたい場合は、aタグ内の子としてスパンにスタイリングを配置します。
8. 斜体は使用しないでください。
9. レイアウトには BR を使用せず、常にテーブルを使用してください。
10. テキストでは P ではなく BR を使用してください (スタンジ マージンの問題や段落が完全に無視されるのを避けるため)。

以前は非常に多くのメールを受け取っていたので、結果的にばかげたことになったので、寸法やその他の落とし穴をチェックする作業を支援するスクリプトを作成しました。使用することに興味がある場合は、ここで見つけることができます。

http://pastie.org/6250834

スクリプトは、通常のスクリプト タグとして追加するか、GreaseMonkey などを使用して有効にすることができます (Firefox で動作するように設計されていますが、他の場所で動作しない理由はわかりません)。メールを作成するために使用した方法により、次の条件のいずれかが満たされた場合にのみ有効になります。

1. width="100%"実際の電子メール コンテンツを中央に配置するために使用される、設定された外側のラッピング テーブルがあります。
2. または... を持つ外側の要素 (テーブルまたは div) がありid="base"ます。

私はあなたの HTML を渡しました。下の画像は結果の出力です。実際のページがある場合は、縁取りされた各項目にカーソルを合わせることができ、問題が何であるかの大まかなアイデアが得られるため、より意味があります (または、Firebug などを使用して要素を直接検査することもできます)。

したがって、上記を調べたところ、修正が必要な問題がいくつかあるようです。最も重要なのは、rowspans と colspans (これらは常に Outlook で問題を引き起こします) を取り除き、すべてのディメンションが集計されていることを確認することです。正しく。これらの問題を修正すると、かなりの改善が見られるかもしれませんが、そうではないかもしれません.HTML メール作成の危険な生活に確実性はありません.

それが役に立てば幸い。

Answer 2

あなたのトップテーブルのためにこれを試してください：

<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td height="23" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">

        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-top.png" width="575" height="36" style="display:block;" />
            </td>
          </tr>
          <tr>
            <td bgcolor="#f0d7c1" width="575">
              <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td width="28">
                  </td>
                  <td width="519" style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG &ndash; we love the products. When we bring the products to Oklahoma City, nobody else has the products. It’s a big plus here for our market area. I think it would be a great thing for people to get online and see what TAG can do for them.
                        </td>
                      </tr>
                      <tr align="right">
                        <td valign="bottom" style="font-size:11px; line-height:18px; color:#000000; font-style:normal; font-weight:bold; font-family:Helvetica, Arial, sans-serif;">Sirron Brown, Marketing Director<br />
                          Excell Home Care and Hospice, Oklahoma</td>
                      </tr>
                    </table>
                  </td>
                  <td width="28">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <img src="https://www.tagwebstore.com/email/testimonial-bottom.png" width="575" height="57" style="display:block;" />
            </td>
          </tr>
        </table>

      </td>
      <td width="25">&nbsp;</td>
    </tr>
  </table>

そしてこれはあなたの底のために：

  <table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
    <tr>
      <td width="25">&nbsp;</td>
      <td width="575">
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="left" valign="middle" width="280" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;">
              <a href="mailto:info@tagwebstore.com" style="color:#000001; text-decoration:none;">info@tagwebstore.com</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;866.232.6477
            </td>
            <td width="193" style="font-family:Helvetica, Arial, sans-serif; font-size:12px;" valign="middle" align="right">
              Follow us on Twitter &amp; YouTube
            </td>
            <td valign="middle" width="49">
              <a href="https://twitter.com/TAGhomecaremktg"><img src="https://www.tagwebstore.com/email/twitter.png" width="49" height="17" border="0" style="display:block;" /></a>
            </td>
            <td valign="middle" width="53">
              <a href="http://www.youtube.com/TAGWebinars"><img src="https://www.tagwebstore.com/email/youtube.png" width="53" height="21" border="0" style="display:block;" /></a>
            </td>
          </tr>
        </table>
      </td>
      <td width="25">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="3" height="20">&nbsp;</td>
    </tr>
  </table>

全体的に、それは本当にうまくコーディングされていて、それぞれが必須であるとは言わずに、いくつかの小さなことを変更しただけですが、それが機能する場合は、変更をリバースエンジニアリングして、何がそれを破壊したかを見つけることができます。私はそれをテストしていないので、うまくいけばこれはうまくいきます...