在单击邮件模板中的Outlook中的图像时获取滚动条

时间:2016-04-06 10:08:38

标签: html css email outlook outlook-2010

我正在使用responsive.In OutLook创建一个邮件模板,当第一次加载邮件时,图像不显示但邮件看起来不错,没有滚动条。单击图像时,图像将加载并自动滚动条。它没有响应。如何避免这个滚动条?

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <style type="text/css">
    body{
        margin:0 auto;
    }
    .max-width{
        width:100%;
    }
    .no-margin{
        margin:0;
    }
    .margin-equal{
        margin:0 auto;
    }
    .bold{
        font-weight:bold;
    }
    .content-main-p{
        padding:0 0 10px 0;
        margin:0;
    }
    .link{
        outline:none;
        border:0;
        display:inline-block;
        color:#0000EE;
    }
    .wrapper{
        padding:0;
        font-family:'Calibri';
        color:#333;
        overflow:hidden;
        border-collapse:collapse;
        border:0;
        font-size:14px;
        max-width:100%;
    }
    .content{
        background-color:#ffffff;
    }
    .content-main{
        padding:10px 0;
        font-size:14px;
        line-height:20px;
        color:#00201d;
    }
    .expert-content table td a{
        word-break:break-all;
    }
    .expert-content table td{
        vertical-align:top;
        border-collapse:collapse;
        min-height:20px;
    }
    .expert-content .list-test li{
        list-style:none;
        display:table-cell;
        padding:0 2% 0 0;
    }
    .expert-content .list-test li p{
        margin:2px 0;
    }
    .expert-content .list-test li a{
        word-break:break-all;
    }
    .expert-content a,.expert-content span,.expert-content font span{
        display:block !important;
        word-break:break-all !important;
    }
    .content-footer{
        border-top:1px solid #BFBFBF;
        padding:10px 0;
        margin:0;
        font-size:10px;
    }
    .address-panel{
        color:#313131;
        line-height:normal;
    }
    .ExternalClass h1{
        font-weight:bolder !important;
    }
    .ExternalClass *{
        line-height:100% !important;
    }
    .expert-content,.address-panel{
        border-top:1px solid #BFBFBF;
        padding:10px 0;
        width:100%;
    }
    .logo-section a img{
        max-width:100%;
    }
    @media only screen and (max-width: 480px){
        body{
            font-size:11px !important;
            margin:0;
            padding:0;
        }

    }    @media only screen and (max-width: 480px){
        .wrapper{
            width:100% !important;
        }

    }    @media only screen and (max-width: 767px){
        .expert-content td{
            width:100%;
            display:block !important;
        }

    }    @media only screen and (max-width: 480px){
        .expert-content td{
            width:100%;
            display:block !important;
        }

    }    @media only screen and (max-width: 480px){
        .bg-btn{
            font-size:12px;
            margin-right:-130px;
        }

    }</style></head>

      <body>

    <table cellpadding="0" cellspacing="0" class="wrapper margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
     <!--Email Content table-->
         <tr>
         <td class="max-width">
        <div style="padding: 0 1%;">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <div style="position: relative">
                            <table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;">
                                <!--Image section-->
                                <tr class="logo-section">
                                    <td style="background-color:#D9D9D9;">
                                        <table cellspacing="0" cellpadding="0" class="content margin-equal" style="width: 100%;max-width: 100%;table-layout: fixed;position: relative;">
                                            <tbody>
                                            <tr>
                                                <td style="width: 100%;">
                                                    <img style="max-width: 100%; display: block;" src="https://gallery.mailchimp.com/15e0eb6ff3b427d17752e909f/images/04778e34-84a5-487d-be77-813f1a8a9550.png">
                                                </td>
                                            </tr>
                                            <tr style="position: absolute;bottom: 0;">
                                                <td>

                                                    <table cellspacing="0" cellpadding="0" class="content margin-equal" style="max-width: 100%;table-layout: fixed;">
                                                        <tr>
                                                            <td>
                                                                <div style="border-radius: 3px;background-color: #E18600;background: #E18600; width: 400px;position:relative; top:-100px !important;">

                                                                    <a style="font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;text-decoration: none;border-radius: 3px;padding: 15px 25px;border: 1px solid #E18600;display: inline-block;" href="http://www.drupalgeeks.com/still-on-drupal-6-and-looking-for-reliable-long-term-support?utm_source=Email%20Marketing&utm_medium=Email&utm_campaign=Amx-D6-Retainer-MS">        
    Click here                                                                       
                                                                    </a>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>


                                    </td>
                                </tr>
                                <!--End Image section-->
                                <!--Main content-->
                                <tr>
                                    <td class="content-main" style="background-color:#D9D9D9;">
                                        <p>Hi ,</p>

                                          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.software like Aldus PageMaker including versions of Lorem Ipsum..</p>
                              <p>xxxx is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includingversions of Lorem Ipsum.</p>

                                        <p>Thanks,<br>
                                            XXXXXXX</p>

                                    </td>
                                </tr>


                                <!--End 3 Column Layout -->

                                <tr>
                                    <td>
                                        <div style="padding: 10px 0; border-top:1px solid #BFBFBF;"></div>
                                    </td>
                                </tr>
                                <tr class="logo-section">
                                    <td style="text-align:center; background-color:#595959;line-height: 20px;padding: 20px 0 20px 0;color: #ffffff;">


                                        <div style="padding: 8px 8px 2px 8px;">
                                            <a href="">
                                                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/e512ea00cef06b6458a70eca017036ea64ac16d638a7f3b6f64ecc89516cb677a3c5c02d96aa046464ba1eeb74119b940aeef1ad6b4d7159156ec0f5bbc738e2.png">
                                            </a>
                                            <a href="">
                                                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/41518b8775122f06178d677e57942f8e8008b80d3891bd2ac70e26ef59ca04173bb473e3ac1866f89e0ea79a395495b29d6cebef12687cfbc302a6913b5a80ab.png">
                                            </a>
                                            <a href="">
                                                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/cb4ebae50ac0840135990248236b9828610f1828d7f4f49e2f9b4b5683940d3ab2d7a616b3f9228e91525162a4c234157d4100b3e83d00c1fbfdd047b44b7e07.png">
                                            </a>
                                            <a href="">
                                                <img src="https://marketing-image-production.s3.amazonaws.com/uploads/037a112de555a804cbe0be286210f3cbc4a9eaa250556e8cd419acdf80395321955758fe23d0fe50b36bdeccf0918b55ef128d8fd59e8812e8dad71b167032ee.png"></a>

                                        </div>


                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        <div style="text-align:center;background-color:#D9D9D9;padding: 10px 0;">
                                            <a style="color:#000000;font-size: 18px;" href="">Visit us</a>|<a style="color:#000000;font-size: 18px;" href="">Unsubscribe</a>
                                        </div>
                                    </td>
                                </tr>
                                <!--End Signature panel-->
                                <!-- Disclaimer -->
                                <tr>
                                    <td class="content-footer no-margin">
                                        <p class="no-margin" style="padding:0;"><span class="bold">Note: </span>
                                            This is a promotional email which complies with all the guidelines
                                            of CAN-SPAM act 2003. We have found your email address through our own
                                            efforts on the web search and not through any illegal way. If you find
                                            this email unsolicited, please reply with "REMOVE" in the subject line and
                                            we will take care that you don't receive any further promotional mail.
                                        </p>

                                    </td>
                                </tr>
                                <!--End Disclaimer -->
                            </table>

                        </div>

                    </td>
                </tr>
            </table>
        </div>
        <!--Footer mountain -->
           </td>
     </tr>
        <!--End Email Content table-->
    </table>
    </body>
    </html>

0 个答案:

没有答案