1

私は自分の会社のために取り組んできた電子メールのテンプレートを作成しました。唯一の問題は、ms office から転送されるたびに、テンプレートのテーブル間にスペースが追加されることです。これが起こらないようにする方法はありますか？電子メールが転送されたときにのみ Outlook から新鮮に到着したときは、そこにはありません。これを止めるために追加できるコードはありますか？

ここに画像の説明を入力

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <title>Email Template Version 3</title>
    <style type="text/css">
        /* Base Table Resets */
        body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
        table { border-spacing: 0; }
        table td { border-collapse: collapse; }
    </style>
</head>

<body>
    <!-- Main Email Setting (Background Color) -->
    <table cellpadding="0" cellspacing="0" class="background" style="background-color: #CCCCCC; background-repeat: repeat-x" width="100%">
        <tr>
            <td align="center" valign="top">
                <!-- Super Top Header -->
                <table cellpadding="0" cellspacing="0" width="650">
                    <tr>
                        <td align="left" height="30" width="325"><span style="font-size: 12px; font-weight: normal; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif; text-decoration: none;">July 31st, 2013</span></td>

                        <td align="right" height="30" width="325"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Having trouble viewing this email? <a href="#" style="color: #0075AA; text-decoration: none;">Click Here!</a></span></td>
                    </tr>
                </table><!-- /Super Top Header -->

                <!-- Header -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <!-- Left Corner -->
                        <td width="15"><img alt="Left Corner" border="0" height="110" src="http://partspro.com/email/img/corners/tlcorner.gif" width="15" /></td>

                        <td align="left" valign="middle" width="620">
                            <table cellpadding="0" cellspacing="0" width="620">
                                <tr>
                                    <!-- Parts Pro Logo -->
                                    <td width="184">
                                        <a href="http://www.partspro.com"><img alt="Parts Pro Logo" border="0" height="76" src="http://partspro.com/email/img/logos/partspro.gif" width="184" /></a>
                                    </td>

                                    <td width="3">&nbsp;</td>
                                    <!-- Newswire Logo -->
                                    <td width="345"><img alt="Parts Pro Newswire" border="0" height="76" src="http://partspro.com/email/img/logos/newswire.gif" width="345" /></td>

                                    <td width="3">&nbsp;</td>

                                    <td>
                                        <!-- Social Media Top Icons -->
                                        <table border="0" style="padding-left: 1px;" width="83">
                                            <tr>
                                                <!-- Facebook -->
                                                <td>
                                                    <a href="https://www.facebook.com/PartsProCenters" target="_blank"><img alt="Facebook" border="0" height="37" src="http://partspro.com/email/img/icons/facebook.gif" width="39" /></a>
                                                </td>

                                                <!-- Linked In -->
                                                <td>
                                                    <a href="http://www.linkedin.com/groups/Parts-Pro-Performance-Centers-4867941" target="_blank"><img alt="LinkedIn" border="0" height="37" src="http://partspro.com/email/img/icons/linkedin.gif" width="39" /></a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <!-- Twitter -->
                                                <td>
                                                    <a href="https://twitter.com/PartsProPerform" target="_blank"><img alt="Twitter" border="0" height="37" src="http://partspro.com/email/img/icons/twitter.gif" width="39" /></a>
                                                </td>

                                                <!-- Youtube -->
                                                <td>
                                                    <a href="http://www.youtube.com/user/PartsProCenters" target="_blank"><img alt="YouTube" border="0" height="37" src="http://partspro.com/email/img/icons/youtube.gif" width="39" /></a>
                                                </td>
                                            </tr>
                                        </table><!-- /Social Media Top Icons -->
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <!-- Right Corner -->
                        <td width="15"><img alt="Right Corner" border="0" height="110" src="http://partspro.com/email/img/corners/trcorner.gif" width="15" /></td>
                    </tr>
                </table><!-- /Header -->

                <!-- Featured Image Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; padding: 0 15px;" width="620">
                    <tr>
                        <!-- Featured Image for the Email -->
                        <td align="center"><img alt="Featured Image" height="200" src="http://partspro.com/email/img/headers/header.png" width="620" /></td>
                    </tr>
                </table><!-- /Featured Image Table -->

                <!-- Main Body Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;" width="650">
                    <tr>
                        <!-- Feature 1 -->
                        <td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 15px;" valign="top" width="420">
                            <table border="0" cellpadding="0" cellspacing="0" width="420">
                                <tr>
                                    <!-- Feature 1 Image -->
                                    <td>
                                        <img alt="News Feature 1" border="0" height="260" src="http://partspro.com/email/img/features/feature1.png" width="420" /><br /><br />
                                    </td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Header -->
                                    <td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">Celebrate 75 Years of Edelbrock!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Text -->
                                    <td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Commemorate Edelbrock's 75th Anniversary in style with these limited edition accessories. The unique air cleaner and valve covers are made of die-cast aluminum, which is then polished to a mirror-like finish and complimented with black anodized aluminum inserts that feature a laser etched design. Want a closer look? Click the link below!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 1 Button -->

                                    <td align="right">
                                        <a href="#"><img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" /></a>
                                    </td>
                                </tr>
                            </table><!-- Feature 2 -->

                            <table border="0" cellpadding="0" cellspacing="0" width="420">
                                <tr>
                                    <!-- Feature 2 (Image) -->
                                    <td><br />
                                        <img alt="News Feature 2" border="0" height="260" src="http://partspro.com/email/img/features/feature2.png" width="420" /><br /><br />
                                    </td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Header -->
                                    <td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">New Intake for 2012-13 Camaro!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Text -->
                                    <td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Airaid's new MXP-Series Cold Air Intake system ups the ante for the 2012-13 V6 Camaro with an additional 14 horsepower and 13 lb-ft of torque, with no aftermarket tuning required! Did we also mention the intake is made in the USA and backed by Airaid's "No Hassle" warranty? Well, it is. So what are you waiting for. Get your order in today! Want some more information? Click the link below!</span></td>
                                </tr>

                                <tr>
                                    <!-- Feature 2 Button -->
                                    <td align="right" width=" 5px">
                                        <a href="#"><img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <!-- Line Seperator Down the Right Side -->
                        <td valign="middle" width="1"><img alt="Divider" height="857" src="http://partspro.com/email/img/seperator.gif" width="1" /></td>

                        <!-- Right Side Bar -->
                        <td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 14px;" valign="top" width="169">
                            <table cellpadding="0" cellspacing="0" width="169">
                                <tr>
                                    <!-- Right Side Bar Text 1 -->
                                    <td width="169">
                                    <!-- Join the Team -->
                                     <span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>Join the Team!</strong><br />
                                    If you are a local Performance Automotive Aftermarket retailer, you should take a look at all the marketing programs that we have developed to help you sell more products.<br /><br />

                                    <!-- Visit our Site -->
                                     Visit our site at:&nbsp;<br />
                                    <a href="http://www.partspro.com" style="color: #0075AA; text-decoration:none;">www.partspro.com</a> and give us a call.<br /><br />

                                    <!-- Contact -->
                                     A professional account representative is ready to help!<br />
                                    <strong>Phone:</strong>&nbsp;(423) 282-0211<br />
                                    <strong>Email:</strong> <a href="mailto:jerrys@partspro.com?subject=About%20the%20Parts%20Pro%20NewsWire" style="color:#0075AA; text-decoration:none;">jerrys@partspro.com</a><br /><br /><br />

                                    <!-- What of the Week -->
                                     <img alt="What of the Week?!" border="0" height="92" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek-logo.gif" style="padding: 0;" width="170" /> Right before this, he clothslined the guy at the drive-thru at Wendy's....<br />
                                    <a href="http://www.youtube.com/watch?v=DpgrTyrBvlA"><img alt="What?! Of the Week Youtube Image" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek.gif" style="padding: 10px 0 0 0;" /></a><br /><br />

                                    <!-- What of the Week (Image & Link) -->
                                     <a href="http://www.youtube.com/watch?v=DpgrTyrBvlA"><img alt="Watch It!" border="0" height="32" src="http://partspro.com/email/img/buttons/watch.gif" style="padding: 0;" width="170" /></a>

                                     <!-- Ad Space (Image & Link) -->
                                     <a href="http://www.totaltruckcenters.com"><img alt="Total Truck Centers" border="0" height="170" src="http://partspro.com/email/img/banners/extraspace.gif" style="padding: 0;" width="170" /></a></span></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Main Body Table -->

                <!-- Gallary of 6 Table -->
                <table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <td align="center">
                            <table cellpadding="0" cellspacing="0" width="610"></table>

                            <table border="0" cellpadding="0" cellspacing="0" width="610">
                                <tr>
                                    <!-- Minifeature 1 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 1" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures1.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 2 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 2" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures2.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 3 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 3" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures3.gif" width="200" /></a>
                                    </td>
                                </tr>

                                <!-- Minifeature 1-3 Headings -->
                                <tr>
                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>
                                </tr>

                                <!-- Minifeature 1-3 Spacing -->
                                <tr>
                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>

                                    <td>&nbsp;</td>
                                </tr>

                                <tr>
                                    <!-- Minifeature 4 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 4" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures4.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 5 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 5" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures5.gif" width="200" /></a>
                                    </td>

                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="5">&nbsp;</td>

                                    <!-- Minifeature 6 Image -->
                                    <td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
                                        <a href="#"><img alt="Mini Featured 6" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures6.gif" width="200" /></a>
                                    </td>
                                </tr>

                                <!-- Minifeature 4-5 Headings -->
                                <tr>
                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>

                                    <td>&nbsp;</td>

                                    <td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&amp;N AirFilter</strong></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Gallary of 6 Table -->

                <!-- Rebates Banner Table -->
                <table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <!-- Rebates Banner (Image & Link) -->
                        <td align="center">
                            <a href="http://partspro.com/cms/rebates/"><img alt="Rebates Banner" height="100" src="http://partspro.com/email/img/banners/rebatesbanner.gif" width="650" /></a>
                        </td>
                    </tr>
                </table><!-- /Rebates Banner Table -->

                <!-- Footer Table -->
                <table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
                    <tr>
                        <td width="425">
                            <table border="0" width="420">
                                <tr>
                                    <!-- AAM Logo -->
                                    <td style="padding-right: 5px;"><img alt="AAM Logo" border="0" height="77" src="http://partspro.com/email/img/logos/aam.gif" width="122" /></td>

                                    <!-- Copyright -->
                                    <td><span style="font-size: 12px; color:rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Copyright © 2013 AAM Group. All Rights Reserved.<br />
                                    <!-- Address -->
                                     198 Industrial Park Road. Piney Flats, TN 37686</span><br /><br />

                                    <!-- Subscribe, Forward, Unsubscribe -->
                                     <span style="font-size: 12px; color: rgb(000, 000, 000); font-family:Helvetica,Arial,sans-serif;"><a href="#" style="color:#0075AA; text-decoration: none;">Forward</a> l <a href="#" style="color: #0075AA; text-decoration: none;">Subscribe</a> l <a href="#" style="color: #0075AA; text-decoration: none;">Unsubscribe</a></span></td>
                                </tr>
                            </table>
                        </td>

                        <!-- Social Media Mini Links -->
                        <td align="right" style="background-color: #FFFFFF" valign="bottom" width="125">
                            <table cellpadding="5" cellspacing="0" width="155">
                                <tr>
                                    <!-- Facebook -->
                                    <td align="right" width="170">
                                        <a href="https://www.facebook.com/PartsProCenters" target="_blank"><img alt="Facebook" border="0" height="32" src="http://partspro.com/email/img/icons/facebook.gif" width="32" /></a>
                                    </td>

                                    <!-- LinkedIn -->
                                    <td align="right" width="170">
                                        <a href="http://www.linkedin.com/groups/Parts-Pro-Performance-Centers-4867941" target="_blank"><img alt="LinkedIn" border="0" height="32" src="http://partspro.com/email/img/icons/linkedin.gif" width="32" /></a>
                                    </td>

                                    <!-- Twitter -->
                                    <td align="right" width="170">
                                        <a href="https://twitter.com/PartsProPerform" target="_blank"><img alt="Twitter" border="0" height="32" src="http://partspro.com/email/img/icons/twitter.gif" width="32" /></a>
                                    </td>

                                    <!-- Youtube -->
                                    <td align="right" width="170">
                                        <a href="http://www.youtube.com/user/PartsProCenters" target="_blank"><img alt="YouTube" border="0" height="32" src="http://partspro.com/email/img/icons/youtube.gif" width="32" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!-- /Footer Table -->

                <!-- Shadow at the bottm -->
                <table cellpadding="0" cellspacing="0" style="line-height: 0;" width="650">
                    <tr height="10">
                        <td height="10"><img border="0" height="10" src="http://partspro.com/email/img/shadow.png" width="650" /></td>
                    </tr>

                    <tr>
                        <td height="10"></td>
                    </tr>
                </table><!-- /Shadow at the bottm -->

                <!-- Who Sent This Email -->
                <table cellpadding="0" cellspacing="0" width="650">
                    <tr>
                        <td align="center" width="310"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">This email was sent to you from: <a href="mailto:jonathanf@partspro.com" style="color: #3185c4; text-decoration:none;">jonathanf@partspro.com</a></span><br />
                        <br /></td>
                    </tr>
                </table><!-- /Who Sent This Email -->
            </td>
        </tr>
    </table>
</body>
</html>
4

4 に答える 4

1

申し訳ありませんが、できません。電子メールは最初のコードを正しく処理するのが難しいゲームであり、Outlook は最初の受信時に大量のコードを追加し、転送中に渡されます。他社の HTML ニュースレターを転送しようとしましたか? 特にOutlook Webアプリから、すべてのテーブルを壊さずに通過したことはありません。

于 2013-08-27T16:03:09.990 に答える
1 
<style type="text/css">tr {font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px;}</style>

注:上記を試してみてください。正常に動作しますが、すべての td 要素に line-height プロパティを指定してください。 参考文献

  1. https://www.campaignmonitor.com/forums/topic/7376/outlook-2013-cell-height-bug-solution/
  2. https://www.emailonacid.com/blog/article/email-development/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
于 2015-11-25T07:57:42.817 に答える
0

Outlook の MS Word HTML エンジンは、大量の HTML をメールに追加します。スタイル要素に次の行を挿入すると、うまくいきました。

/* Outlook, yahoo extra line problem :  */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
p {margin:0; padding:0; margin-bottom:0;}

次のように Outlook html を非表示にしないでください。

p.MsoNormal { display: none;}

お使いの Outlook バージョンではうまく機能するかもしれませんが、他のバージョンの Outlook では電子メールが台無しになる可能性があるためです。（私自身の蛇行経験から言えば）

詳細: http://www.emailonacid.com/blog/details/C13/paragraphs_in_html_email

注意: スタイル セクションは、この種の修正にのみ使用してください。GMAIL が認識できないため、要素のスタイル設定に「一般的な」CSS を使用しないでください。すべての単一の html 要素に対して、代わりにインライン CSS を使用してください!

于 2014-11-27T15:33:36.997 に答える