Outlook2007でHTMLメールが正しく表示されない
久しぶりに研究に取り掛かりました。私はまだ答えを見つけることができません。
テーブルに間違った幅を表示しているHTMLがあります。これがhtmlメールへのリンクです： https://tagwebstore.com/email/tag-email-10percentmore.html そしてこれがOutlook2007でどのように見えるかのスクリーンショットです：
主な問題は底部です。 HTMLメールのリンクはそれを正しく表示します。ここから他に何をすべきかわかりません。これが私が問題を抱えている下部の私のコードです：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </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 – 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"> </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"> </td>
</tr>
<tr>
<td width="25"> </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:[email protected]" style="color:#000000; text-decoration:none;">[email protected]</a> | 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 & 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"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
<!--Footer End-->
含まれているテーブルの幅は625pxであると想定されています。どんな助けでも大歓迎です。
ああ、htmlメールの喜び
HTMLベースの電子メールを処理するとき、特に厳密なクライアントとピクセルパーフェクトなデザインを使用するときは、従わなければならない多くのルールがあります。少なくとも2年間、そのようなプロジェクトに取り組む必要がなかったことを非常に嬉しく思います。今...私の練習がまったく嫌いな主な理由は、主に2つの電子メールクライアントにあります。史上最悪の最初であり、Lotus Notes 6.5.4（公平を期すために、今では10年以上経過していますが、それでも！）、およびすべて2番目に悪い時間ですが、Outlook 2007と2010の場合、悪いことでさえ最高ではありません。
Microsoft Word WYSIWYGHTMLエンジンを使用してOutlook2007および2010でHTMLメールをレンダリングするのが良いと思った人は誰でも、気が狂って、怠惰で、失われているか、少し混乱しているに違いありません（必要に応じて削除してください）。これは、通常、ランダムで説明のつかないサイズ計算やパディングの問題で、開発者にレンダリングの問題を終わらせることはありません。
私のブログから取得 http://blog.pebbl.co.uk/2011/06/collapsible-html-email-and-Outlook.html
簡単に言えば、私はあなたをうらやましくない:)
メールのトラブルを解決する最善の方法は、次のルールに従うことでした。
colspansまたはrowspansは絶対に使用しないでください。- テーブルとセルには常に正しい寸法を設定してください。
&nbps;ではなくスペーサーgifを使用してください。- 常に正しい画像サイズを指定し、画像を拡大または縮小しないでください。
- 常に
style="display:block;"を画像に追加してください。 divsの使用は避けてください。- リンクに色を付けたい場合は、
aタグ内の子としてスパンにスタイリングを配置します。 - イタリックは使用しないでください。
- レイアウトにBRを使用せず、常にテーブルを使用してください。
- PではなくテキストでBRを使用します（スタンジマージンの問題と段落が完全に無視されるのを避けるため）。
私が通っていた膨大な数の電子メールがばかげたことになってしまったので、私は寸法やその他の考えられる落とし穴をチェックする作業を支援するスクリプトを開発しました。あなたがそれを使うことに興味があるなら、あなたはそれをここで見つけることができます：
スクリプトは、通常のスクリプトタグとして追加するか、GreaseMonkeyなどを使用して有効にすることができます（Firefoxで動作するように設計されていますが、他の場所で動作しない理由はわかりません）。以前のメールの作成方法により、次のいずれかの条件が満たされた場合にのみ有効になります。
- 実際の電子メールコンテンツを中央に配置するために使用される、
width="100%"が設定された外側の包装テーブルがあります。 - または...
id="base"を持つ外部要素（テーブルまたはdiv）があります。
HTMLを通過させました。下の画像は結果の出力です。境界のある各アイテムにカーソルを合わせると、問題が何であるかが大まかにわかるため、実際のページがある場合にわかりやすくなります（どちらかまたは、Firebugなどを使用して要素を直接検査できます）。
したがって、上記を調べると、修正が必要な問題がいくつかあるようです。最も重要な問題は、行スパンと列スパン（これらは常にOutlookで問題を引き起こします）を取り除き、すべてのディメンションが集計されていることを確認することです。正しく。これらの問題を修正すると、かなりの改善が見られるかもしれませんが、そうではないかもしれませんが、HTMLメール作成の危険な生活に確実性はありません...
それが役に立てば幸い。
あなたのトップテーブルのためにこれを試してください：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </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 – 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"> </td>
</tr>
</table>
そしてこれはあなたの底のために：
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td width="25"> </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:[email protected]" style="color:#000001; text-decoration:none;">[email protected]</a> | 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 & 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"> </td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
</table>
全体的に、それは本当にうまくコーディングされており、いくつかの小さなことを変更しただけで、それぞれが必須であるとは言われていませんが、それが機能する場合は、変更をリバースエンジニアリングして、何がそれを破壊したかを見つけることができます。私はそれをテストしていないので、うまくいけばこれはうまくいきます...