HTML 电子邮件格式无法在 MS Outlook 中正确呈现

标签 html email outlook width

<分区>

我使用 Ink 样板 HTML 和 CSS 文件创建了 HTML 电子邮件群发。我已将 CSS 添加到电子邮件的头部,并使用 Zurb 的 Inliner 来内联样式。

电子邮件在多个客户端上正确呈现 - 但不是 MS Outlook 2010。Outlook 不遵守最大宽度标签(我知道不支持)但我也添加了宽度标签以保持正确的格式展望。

有谁能确定我在这里可能遗漏了什么吗?

Screenshot

提前感谢您的帮助!

![<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />
        <!-- For testing only -->
    </head>
    <body style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
        <style type="text/css">
        </style>
        <table class="body" style="max-width: 584px; border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 584px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0 auto; padding: 0;">
            <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                <td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
                    <center style="width: 100%; max-width: 584px;">
                        <!-- Email Content -->
                        <table class="container" width="584px" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 584px; display: block !important; margin: 0 auto; padding: 0;">
                            <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
                                    <!-- first section begin -->
                                    <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                            <!-- first item begin -->
                                            <td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
                                                <table class="two columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 80px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 60px;">
                                                                <!-- Centered image --> 
                                                                <img class="center" src="https://s3.amazonaws.com/smaaoink/logo1.gif" alt="" width="97px" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <!-- first item end -->
                                            <!-- second item begin -->
                                            <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                                <table class="eight columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 380px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 360px;">
                                                                <!-- Centered image --> 
                                                                <img class="center" src="https://s3.amazonaws.com/smaaoink/logo2.gif" alt="Alabama Outdoors" width="487px" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- first section end --><!-- second section begin -->
                            <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                    <!-- first item begin -->
                                    <td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
                                        <table class="four columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 180px; margin: 0 auto; padding: 0;">
                                            <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                    <center style="width: 100%; min-width: 160px;">
                                                        <!-- Centered image --> 
                                                        <img class="center" src="https://s3.amazonaws.com/smaaoink/dealsv5.gif" alt="Exclusive Deals" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                    </center>
                                                </td>
                                                <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                            </tr>
                                        </table>
                                    </td>
                                    <!-- first item end -->
                                    <!-- second item begin -->
                                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                        <table class="eight columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 380px; margin: 0 auto; padding: 0;">
                                            <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                    <center style="width: 100%; min-width: 360px;">
                                                        <!-- Centered image --> 
                                                        <img src="https://s3.amazonaws.com/smaaoink/20v5.gif" alt="Save on Patagonia, TNF and more" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: left; clear: both;" align="left" />
                                                    </center>
                                                </td>
                                                <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <!-- second item end--><!-- second section end --><!-- third section begin --><!-- first item begin -->
                            <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
                                            <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                    <center style="width: 100%; min-width: 560px;">
                                                        <!-- Centered image --> 
                                                        <img class="center" src="https://s3.amazonaws.com/smaaoink/storewide1200.gif" alt="" width="584" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                    </center>
                                                </td>
                                                <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                            </tr>
                                        </table>
                                    </td>
                                    <!-- first item end -->
                                    <!-- third section end -->
                                    <!-- fourth section begin -->
                                    <!-- first item begin -->
                                    <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                            <td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img class="center" src="https://s3.amazonaws.com/smaaoink/p1new.gif" alt="Exclusive Deals" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img src="https://s3.amazonaws.com/smaaoink/p2new.gif" alt="Save on Patagonia, TNF and more" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: left; clear: both;" align="left" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                            <td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img class="center" src="https://s3.amazonaws.com/smaaoink/p3new.gif" alt="Exclusive Deals" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img src="https://s3.amazonaws.com/smaaoink/p4new.gif" alt="Save on Patagonia, TNF and more" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: left; clear: both;" align="left" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                            <td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 20px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img class="center" src="https://s3.amazonaws.com/smaaoink/p5new.gif" alt="Exclusive Deals" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: none; clear: both; margin: 0 auto;" align="none" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
                                                <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;">
                                                    <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                                                        <td class="center panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px;  margin: 0; padding: 10px; " align="center" bgcolor="ffffff" valign="top">
                                                            <center style="width: 100%; min-width: 260px;">
                                                                <!-- Centered image --> 
                                                                <img src="https://s3.amazonaws.com/smaaoink/p6new.gif" alt="Save on Patagonia, TNF and more" width="292" style="display: block; max-width: 100%; width: 100%; height: auto !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; float: left; clear: both;" align="left" />
                                                            </center>
                                                        </td>
                                                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px;  font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <!-- PATA PRODUCT END --><!-- END Email Content -->
                                </tr>
                            </table>
                        </table>
                    </center>
                </td>
            </tr>
        </table>
    </body>
</html>][1]

最佳答案

只需删除所有宽度属性(不是样式!)中的“px”,例如 width="584px"->宽度=“584”。你很高兴...

关于HTML 电子邮件格式无法在 MS Outlook 中正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27206707/

相关文章:

windows - 使用 To : field populated 在 Outlook 2010 中打开 ICS 文件

javascript - Jquery Sticky 导航在满足特定条件时启动

javascript - Bootstrap 等列

email - 修改 CDO.Message 对象中附件的内容类型

iphone - 如何从 MFMailComposer 的收件人地址中获取电子邮件地址

php - .ics 邀请日历在 Outlook.com 问题中不起作用

javascript - 在本地系统工作,但在服务器上传时不工作

javascript - Blazor在一键onclick事件中执行C#和JS函数

Python - 获取多部分电子邮件的正文

outlook - VSTO (Outlook) 强制 MSG 附件为 olEmbeddditem 类型,但需要 olByValue