电子邮件在所有Outlook客户端中都超出了600px的宽度

问题描述 投票:0回答:1

任何帮助都可以!我已经进行了几个小时的电子邮件测试。我一直在研究!我似乎无法弄清楚为什么我的电子邮件不遵循600的宽度。这是下面的代码,以及我在Acid测试平台上的电子邮件中看到的屏幕截图。除了所有Outlook,我的电子邮件在其他所有电子邮件客户端上看起来都很不错。只有在Outlook 2003 Windows 7上看起来不错的Outlook,我再也无法通过谷歌搜索为什么Outlook在电子邮件开发方面很烂!请任何建议和帮助都可以!

enter image description here

enter image description here

enter image description here

enter image description here

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>All-Wall Abandoned Cart Email</title>    
  <!--[if gte mso 7]><xml>
  <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
    </xml><![endif]-->
  <style type="text/css">
    * { 
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
        box-sizing: border-box;
    }

    body {
        -webkit-font-smoothing: antialiased; 
        -webkit-text-size-adjust: none; 
        width: 100% !important; 
        height: 100%;
        color: #000;
    }

    img { 
        max-width: 100%; 
        display: block;
        border: 0;
        outline: 0;
    }

    .collapse {
        margin: 0;
        padding: 0;
    }

    .container {
        display: block !important;
        max-width: 600px !important;
        margin: 0 auto !important; 
        clear: both !important;
        background-color: #FFF;
    }

    .content {
        max-width: 600px;
        margin: 0 auto;
        display: block; 
    }

    .content table, .content table tr, .content table tr td  { 
        max-width: 100%; 
        border-collapse: collapse;
        border: 0;
        outline: 0;
        border-spacing: 0;
    }

    table {
        width: 100%;
        display: table;
    }

    .two-col table {
        width: 300px;

    }

    .three-col table {
        width: 200px;
    }

    .pad--left {
            padding-left: 25px;
        }

    @media only screen and (max-width: 480px) {

        .two-col table, .three-col table {
            width: 100%; 
        }
        .pad--left {
            padding-left: 100px;
        }

    }
</style>
</head>

<body bgcolor="#ccc">
<table role="presentation" cellspacing="0" cellpadding="0">
 <!--[if mso]>
 <center>
 <table><tr><td width="580">
<![endif]-->
    <tr>
        <td>
            <!-- HEADER -->
            <table role="presentation" cellspacing="0" cellpadding="0">
                <tr>
                    <td></td>
                    <td class="container">
                        <div class="content">
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 5px;">
                                        <!--[if mso]>
                                <table role="presentation" width="50%"><tr><td><img width="45" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone-icon.png" alt="phone icon" style="text-align: right; width: 45px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                <div style="display:none">
                                    <![endif]-->
                                        <img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone-icon.png" alt="phone icon" style="width: 45px;"/ />
                                        <!--[if mso]>
                                        </div>
                                        <![endif]-->
                                      </td>
                                    <td style="padding-top: 15px; padding-bottom: 15px; padding-left: 5px; padding-right: 5px;">
                                        <span style="font-weight: bold; color: #0067B9;">Need Help? Se habla español</span> 
                                        <br> 
                                        <a href="tel:8009290927" style="color: #000; text-decoration: none;">(800) 929-0927</a>
                                    </td>
                                    <td style="padding-top: 15px; padding-bottom: 15px; padding-left: 5px; padding-right: 15px;" align="right">
                                        View email as <a href="%%!preview_url%% " style="font-weight: bold; color: #0067B9; text-decoration: none;">webpage</a>
                                    </td>
                                </tr>
                            </table>
                        </div>  
                    </td>
                    <td></td>
                </tr>
            </table><!-- /HEADER -->

            <!-- BODY -->
            <table role="presentation" cellspacing="0" cellpadding="0">
                <tr>
                    <td></td>
                    <td class="container">
                        <div class="content">
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" style="padding-top: 15px; padding-bottom: 45px;">
                                        <!--[if mso]>
                                <table role="presentation" width="50%"><tr><td><img width="243" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/All-Wall-LogoBanner.png" alt="cart image" style="text-align: right; width: 243px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                <div style="display:none">
                                    <![endif]-->
                                    <img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/All-Wall-LogoBanner.png" alt="logo" />
                                    <!--[if mso]>
                                    </div>
                                    <![endif]-->
                                  </td>  
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center"> 
                                        <table role="presentation" cellspacing="0" cellpadding="0" style="background-image: linear-gradient(to right, #EFEFEF , #FFF); background-color: #EFEFEF;">
                                            <tr>
                                                <td align="center" style="padding-top: 40px;">
                                                    <img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart-icon.png" alt="cart icon" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">
                                                    <h3 style="display: inline-block; font-weight: 400; font-size: 25px; padding-top: 5px; padding-bottom: 25px;">We've Saved Your Cart</h3>
                                                    <!--[if mso]>
                                            <table role="presentation" width="50%"><tr><td><img width="30" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart.png" alt="cart image" style="text-align: right; width: 30px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                            <div style="display:none">
                                                <![endif]-->
                          <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart.png" alt="cart image" style="width:30px; display: inline-block;" />
                                                    <!--[if mso]>
                          </div>
                            <![endif]-->
                        </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style="padding-bottom: 25px;">
                          <a href="#" style="text-decoration: none; display: inline-block;"><span style="background-color: #FFF; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border: 2px solid #B30F11; color: #B30F11; font-weight: 500; display: block; margin-left: 10px; margin-bottom: 10px; margin-right: 10px; margin-right: 10px; font-size: 18px;">Shop Now</span></a>
                                                    <a href="#" style="text-decoration: none; display: inline-block;"><span style="background-color: #FFF; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border: 2px solid #B30F11; color: #B30F11; font-weight: 500; display: block; margin-left: 10px; margin-bottom: 10px; margin-right: 10px; margin-right: 10px; font-size: 18px;">View Cart</span></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" style=" background-color: #EFEFEF; background-image: url(http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/worker-bg.png); background-repeat: no-repeat; background-size: cover; background-position: right; padding-top: 45px; padding-bottom: 85px; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; border: 0; color: #FFF; text-transform: uppercase; width: 100%;">
                                        <h2 style="color: #FFF; text-transform: uppercase; font-size: 40px; padding-bottom: 15px;">Hurry while It&#8217;s<br>still in stock</h2>
                                        <a href="#" style="text-decoration: none;"><span style="color: #FFF; text-transform: uppercase; font-size: 16px; font-weight: 600; display: block;">Return to your cart</span></a>
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td class="three-col" style="padding-top: 15px; padding-bottom: 15px; background-color: #00549A; color: #FFF; text-transform: uppercase;">
                                        <!--[if mso]>
                                <table role="presentation" width="33%"><tr><td></td></tr></table>
                                <div style="display:none">
                                    <![endif]-->    
                    <table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
                                                <tbody>
                                                    <tr>
                                                        <td align="center" style="padding-left: 25px;">
                              <!--[if mso]>
                                                    <table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/satisfaction.png" alt="satisfaction icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                                    <div style="display:none">
                                                        <![endif]-->
                              <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/satisfaction.png" alt="satisfaction icon" style="padding: 5px; display: block;" /></td>
                                                            <!--[if mso]>
                                </div>
                                    <![endif]-->
                            <td align="left" style="color: #FFF; text-transform: uppercase;">Satisfaction<br>Guarantee</td>
                                                    </tr>
                                            </tbody>
                                            </table><!--[if mso]>
                                </div>
                                    <![endif]--><!--[if mso]>
                                <table role="presentation" width="33%"><tr><td></td></tr></table>
                                <div style="display:none">
                                    <![endif]--><table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
                                                <tbody>
                                                    <tr>
                                                        <td align="center" style="padding-left: 25px;">
                              <!--[if mso]>
                                                    <table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/fastship.png" alt="fast ship icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                                    <div style="display:none">
                                                        <![endif]-->
                              <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/fastship.png" alt="fast ship icon" style="padding: 5px; display: block;" /></td>
                                                            <!--[if mso]>
                                </div>
                                    <![endif]-->
                            <td align="left" style="color: #FFF; text-transform: uppercase;">Fast<br>Shipping</td>
                                                    </tr>
                                                </tbody>
                                            </table><!--[if mso]>
                                </div>
                                    <![endif]--><table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
                                                <tbody>
                                                    <tr>
                                                        <td align="center" style="padding-left: 25px;">
                              <!--[if mso]>
                                                    <table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/freeship.png" alt="free ship icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                                    <div style="display:none">
                                                        <![endif]-->
                              <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/freeship.png" alt="free ship icon" style="padding: 5px; display: block;" /></td>
                                                            <!--[if mso]>
                                </div>
                                    <![endif]-->
                            <td align="left" style="color: #FFF; text-transform: uppercase;">Many items<br>Ship free</td>
                                                    </tr>
                                                </tbody>
                                            </table>        
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" style="padding-top: 65px; padding-bottom: 5px;padding-left: 15px; padding-right: 15px;">
                                        <h3 style="font-size: 25px; text-transform: uppercase;">Customer Reviews</h3>
                                        <hr style="margin: 15px 0;">
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="padding-left: 35px; padding-right: 35px; padding-bottom: 15px; text-align: center;">
                                        <table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
                                            <tr>
                                                <td align="right" valign="bottom" style="vertical-align:top; font-size: 14px; font-weight: bold; display: inline-block; margin-right: 10px; padding-top: 5px;">Excellent</td>
                                                <td align="center" valign="top" style="vertical-align:top; display: inline-block;margin-top: -3px;">
                                                    <!--[if mso]>
                                            <table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                            <div style="display:none">
                                                <![endif]-->
                          <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px; display: inline-block; padding-top: 5px;" />
                                                    <!--[if mso]>
                          </div>
                            <![endif]-->
                        </td>
                                                <td align="right" style="font-size: 12px; display: inline-block; padding-top: 5px;">1,880 reviews on&nbsp;</td>
                                                <td align="center" style="display: inline-block; padding-top: 5px;">
                                                    <!--[if mso]>
                                            <table role="presentation" width="50%"><tr><td><img width="20" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/star.png" alt="five stars" style="text-align: right; width: 20px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                            <div style="display:none">
                                                <![endif]-->
                          <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/star.png" alt="star icon" style="padding: 1px; width: 20px; display: inline-block; margin-top: -7px; padding-top: 5px;" />
                                                    <!--[if mso]>
                          </div>
                            <![endif]-->
                        </td>
                                                <td align="left" style="font-size: 12px; display: inline-block; padding-top: 5px;">&nbsp;Trustpilot</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <td style="padding-left: 45px; padding-right: 45px; padding-bottom: 35px;">
                                        <table role="presentation" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="font-size: 12px; padding-top: 25px; color: #707070;">
                                                    Brain Merryman &#8226;  2 reviews
                                                    <hr style="margin: 15px 0;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
                                                        <tr>
                                                            <td style="width: 115px;">
                                                                <!--[if mso]>
                                                        <table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                                        <div style="display:none">
                                                            <![endif]-->
                                <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px;" />    
                                                                <!--[if mso]>
                                </div>
                                <![endif]-->
                              </td>
                                                            <td style="width: 20px;">
                                                                <!--[if mso]>
                                <table role="presentation" width="50%"><tr><td><img width="16" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="text-align: right; width: 16px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                <div style="display:none">
                                <![endif]-->
                                <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="padding: 1px; width: 16px; " />
                                                                <!--[if mso]>
                                </div>
                                 <![endif]-->
                              </td>
                                                            <td style="font-size: 12px; color: #707070;">
                                                                <span>Verified</span>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding-top: 25px; padding-bottom: 25px;">
                                                    <h3 style="padding-bottom: 10px;">Had an awesome experience</h3>
                                                    <span style="font-size:14px; line-height: 22px;">Had an awesome experience. Product was great and shipping was fast</span>
                                                </td>
                                            </tr>
                                        </table>
                                        <table role="presentation" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="font-size: 12px; padding-top: 25px; color: #707070;">
                                                    Jeff &#8226;  1 review
                                                    <hr style="margin: 15px 0;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
                                                        <tr>
                                                            <td style="width: 115px;">
                                                                <!--[if mso]>
                                                        <table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                                        <div style="display:none">
                                                            <![endif]-->
                                <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px;" />    
                                                                <!--[if mso]>
                                </div>
                                <![endif]-->
                              </td>
                                                            <td style="width: 20px;">
                                                                <!--[if mso]>
                                <table role="presentation" width="50%"><tr><td><img width="16" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="text-align: right; width: 16px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
                                <div style="display:none">
                                <![endif]-->
                                <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="padding: 1px; width: 16px; " />
                                                                <!--[if mso]>
                                </div>
                                 <![endif]-->
                              </td>
                                                            <td style="font-size: 12px; color: #707070;">
                                                                <span>Verified</span>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="padding-top: 25px; padding-bottom: 25px;">
                                                    <h3 style="padding-bottom: 10px;">Fast accurate order fulfillment.</h3>
                                                    <span style="font-size:14px; line-height: 22px;">Fast accurate order fulfillment. Very happy with All-Wall Equipment!!</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <table role="presentation" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td class="two-col" style=" background-color: #EFEFEF; background-image: url(http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/support-bg.png); background-repeat: no-repeat; background-size: cover; padding-top: 85px; padding-bottom: 85px; padding-left: 25px; padding-right: 25px;">
                                        <table role="presentation" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td align="center">
                                                    <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone.png" alt="phone" style="padding: 1px; width: 30px;" />  
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style="font-size: 30px;">
                                                    Customer Support
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style=" padding-top: 10px; padding-bottom: 10px;">
                                                    <a href="tel:8009290927" style="color: #0067B9; font-size: 36px; font-weight: bold; text-decoration: none;">(800) 929-0927</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" style="font-size: 16px; font-weight: bold; text-decoration: underline;">
                                                    Se Habla Espa&#241;ol
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </td>
                    <td></td>
                </tr>
            </table><!-- /BODY -->

            <!-- FOOTER -->
            <table role="presentation" cellspacing="0" cellpadding="0">
                <tr>
                    <td></td>
                    <td class="container">
                        <!-- content -->
                        <div class="content">
                            <table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
                                <tr>
                                    <td align="center" style="padding-top: 45px; padding-left: 15px; padding-right: 15px;">
                                            <a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/instagram.png" alt="instagram" style="padding: 1px; margin: 15px; width: 30px; height: 30px; display: inline-block;" /></a>
                                            <a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/facebook.png" alt="facebook" style="padding: 1px; margin: 15px; width: 15px; height: 30px; display: inline-block;" /></a>
                                            <a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/twitter.png" alt="twitter" style="padding: 1px; margin: 15px; width: 30px; height: 24px; display: inline-block;" /></a>
                                            <a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/youtube.png" alt="youtube" style="padding: 1px; margin: 15px; width: 30px; height: 22px; display: inline-block;" /></a>
                                    </td>
                                </tr>

                                <tr>
                                    <td align="center" style="padding-left: 15px; padding-right: 15px; font-weight: bold; font-size: 14px;">
                                        Download our mobile app
                                    </td>
                                </tr>

                                <tr>
                                    <td align="center" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px;">
                                        <a href="#" style="text-decoration: none;">
                                            <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/appstore.png" alt="appstore" style="padding: 1px; width: 140px; display: inline-block;" />
                                        </a>
                                        <a href="#" style="text-decoration: none;">
                                            <img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/googleplay.png" alt="google play" style="padding: 1px; width: 140px; display: inline-block;" />
                                        </a>
                                        <hr style="margin-top: 45px; margin-bottom: 0px; width: 60%; margin-left: auto; margin-right: auto;">
                                    </td>
                                </tr>

                            </table>
                        </div><!-- /content -->     
                    </td>
                    <td></td>
                </tr>
            </table><!-- /FOOTER -->
        </td>
    </tr>
</table>
<!--[if mso]>
 </td></tr></table>
 </center>
<![endif]--> 
</body>
</html>
css email outlook html-email
1个回答
0
投票

几件事...

Outlook桌面不支持背景图像https://www.caniemail.com/search/?s=background-image,所以可能发生的是它采用600宽度并添加了填充。

因此,您可能希望(最简单)将图像制作成文字并成为图像。或者,如果可以管理它,则研究Outlook电子邮件的背景图片,以寻求最佳,最易访问的方法。但是,否则,请确保您在alt标签中包含文本,即<img alt="Hurry while stocks last" ... >

此外,Outlook仅考虑属性宽度。因此,请确保将其包括在内,例如<img width="500" ...>尽管要使其对其他响应,您还需要包括内嵌width样式,这将覆盖width属性,例如<img width="500" style="width:100%;" ..>

所以您有600张宽的图片,但只给出了Outlook 580的宽。这也将其推出。

请确保您内联代码。 Outlook通常不看嵌入式CSS,而只看嵌入式CSS。即不要依赖<style>...</style>中的代码,而是将其与代码内联使用,例如<div class="content" style="...">。有在线工具可以帮助您。

最后,在测试时,您可以切出一个完整的部分,再次进行测试,看看是否可以解决。这样可以快速找到问题所在。

© www.soinside.com 2019 - 2024. All rights reserved.