Windows Outlook игнорирует ширину контейнера тела - PullRequest
Новая
       36

Windows Outlook игнорирует ширину контейнера тела

0 голосов
/ 15 мая 2018

Я проверяю свою новостную рассылку, и все, кажется, работает довольно надежно, за исключением Windows Outlook.Это работает для OSX Outlook, но не для любой версии Windows.В основном внешний вид, кажется, игнорирует основной контейнер, и все разложено.Это также нарушает стили, особенно текстовые и hr-стили.

https://codepen.io/joefus1o4/pen/RyyyLL?editors=1000

    <!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" lang="en" xml:lang="en" style="background:#f3f3f3!important">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <style>
        @media only screen {
            html {
                min-height: 100%;
                background: #cacaca!important
            }
        }

        @media only screen and (max-width:596px) {
            .small-float-center {
                margin: 0 auto!important;
                float: none!important;
                text-align: center!important
            }
            .small-text-center {
                text-align: center!important
            }
            .small-text-left {
                text-align: left!important
            }
            .small-text-right {
                text-align: right!important
            }
        }

        @media only screen and (max-width:596px) {
            table.body img {
                width: auto;
                height: auto
            }
            table.body center {
                min-width: 0!important
            }
            table.body .container {
                width: 95%!important
            }
            table.body .columns {
                height: auto!important;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding-left: 16px!important;
                padding-right: 16px!important
            }
            table.body .columns .columns {
                padding-left: 0!important;
                padding-right: 0!important
            }
            table.body .collapse .columns {
                padding-left: 0!important;
                padding-right: 0!important
            }
            th.small-4 {
                display: inline-block!important;
                width: 33.33333%!important
            }
            th.small-6 {
                display: inline-block!important;
                width: 50%!important
            }
            th.small-12 {
                display: inline-block!important;
                width: 100%!important
            }
            .columns th.small-12 {
                display: block!important;
                width: 100%!important
            }
            table.menu {
                width: 100%!important
            }
            table.menu td,
            table.menu th {
                width: auto!important;
                display: inline-block!important
            }
            table.menu.vertical td,
            table.menu.vertical th {
                display: block!important
            }
            table.menu[align=center] {
                width: auto!important
            }
        }

        @media only screen and (max-width:596px) {
            .header .title {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header h2.text-right {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header th.month.small-6.large-6.columns.first {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header th.year.small-6.large-6.columns.last {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header th.small-6.large-4.columns.first {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header th.small-6.large-4.columns {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .header th.small-6.large-4.columns.last {
                padding: 0!important;
                width: 100%!important
            }
        }

        @media only screen and (max-width:596px) {
            .header hr {
                width: 100%!important
            }
        }

        @media only screen and (max-width:596px) {
            .header .hr_3 {
                width: 100%!important
            }
        }

        @media only screen and (max-width:596px) {
            .header p.text-left {
                margin-bottom: 0!important;
                padding-top: 4px!important;
                padding-bottom: 2px!important;
                padding-right: 8px!important
            }
        }

        @media only screen and (max-width:596px) {
            .header p.text-center {
                margin-bottom: 0!important;
                padding-top: 4px!important;
                padding-bottom: 2px!important;
                padding-left: 8px!important
            }
        }

        @media only screen and (max-width:596px) {
            .header p.text-right {
                border: 0!important;
                margin-top: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .feature h2 {
                padding: 0!important
            }
        }

        @media only screen and (max-width:566px) {
            .feature h2 {
                font-size: 18px!important
            }
        }

        @media only screen and (max-width:448px) {
            .feature h2 {
                font-size: 15.5px!important
            }
        }

        @media only screen and (max-width:596px) {
            .feature p {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .feature hr {
                width: 93%!important
            }
        }

        @media only screen and (max-width:596px) {
            .body-articles hr {
                width: 93%!important
            }
        }

        @media only screen and (max-width:596px) {
            .body-articles .wrapper-inner {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .video h2 {
                padding-left: 0!important
            }
        }

        @media only screen and (max-width:419px) {
            .video h2 {
                font-size: 22px!important
            }
        }

        @media only screen and (max-width:596px) {
            .video hr {
                width: 93%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .OR_ad {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social h2 {
                padding: 0!important;
                font-size: 18px!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social p {
                padding: 0!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .facebook {
                margin: 0!important;
                margin-bottom: 10px!important;
                width: 40%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .instagram {
                margin: 0!important;
                width: 40%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .linkedin {
                margin: 0!important;
                width: 40%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .twitter {
                margin: 0!important;
                margin-bottom: 10px!important;
                width: 40%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social .youtube {
                margin: 0!important;
                width: 40%!important
            }
        }

        @media only screen and (max-width:596px) {
            .ad-social hr {
                width: 93%!important
            }
        }

        @media only screen and (max-width:495px) {
            .footer a {
                font-size: 13px!important
            }
        }
    </style>
</head>

<body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;background:#f3f3f3!important;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"><span class="preheader" style="color:#cacaca!important;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden"></span>
    <table class="body" style="Margin:0;background:#f3f3f3!important;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;height:100%;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
        <tr style="padding:0;text-align:left;vertical-align:top">
            <td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
                <center data-parsed="" style="min-width:580px;width:100%">
                    <table align="center" class="container float-center" style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px">
                        <tbody>
                            <tr style="padding:0;text-align:left;vertical-align:top">
                                <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
                                    <table class="wrapper header" align="center" style="background:#8a8a8a;background-color:#fefefe;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                            <td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:20px;padding-top:40px;text-align:left;vertical-align:top;word-wrap:break-word">
                                                <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                    <tbody>
                                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                                            <hr class="hr_1" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                    <tbody>
                                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                                            <th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:16px;text-align:left;width:564px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
                                                                            <center data-parsed="" style="min-width:532px;width:100%">
                                                                                <a class="OR_logo float-center" target="_blank" href="https://www.outdoorretailer.com/" align="center" style="Margin:0;color:#2199e8;font-family:Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none"><img width="205" height="61" src="https://s15.a2zinc.net/Clients/EmeraldExpo/GlobalAdmin/CUSTOM/5_18_OR_Logo.jpg" alt="outdoor retailer logo" style="-ms-interpolation-mode:bicubic;border:none;clear:both;display:inline;max-width:100%;outline:0;padding-top:34px;text-decoration:none;width:auto"></a>
                                                                            </center>
                                                                        </th>
                                                                        <th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                    <tbody>
                                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                                            <th class="month small-6 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:274px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
                                                                            <h2 class="title" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-left:6px;text-align:left;word-wrap:normal">MAY</h2></th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="year small-6 large-6 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:274px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
                                                                            <h2 class="text-right" style="Margin:0;Margin-bottom:10px;color:inherit;font-family:Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:1.3;margin:0;margin-bottom:10px;padding:0;padding-right:6px;text-align:right;word-wrap:normal">2018</h2></th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                    <tbody>
                                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                                            <hr class="hr_2" width="515" size="5" noshade="" style="background-color:#fefefe;border:0;border-top:5px solid;margin:0 auto">
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                    <tbody>
                                                        <tr style="padding:0;text-align:left;vertical-align:top">
                                                            <th class="small-6 large-4 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:16px;padding-right:8px;text-align:left;width:177.33px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
                                                                            <p class="text-left small-text-right" style="Margin:0;Margin-bottom:10px;border-right:1px solid;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-left:8px;padding-top:6px;text-align:left">Summer Market</p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="small-6 large-4 columns" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:8px;text-align:left;width:177.33px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">
                                                                            <p class="text-center small-text-left" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;margin-bottom:8px;margin-top:6px;padding:0;padding-bottom:4px;padding-top:6px;text-align:center">July 23-26, 2018</p>
                                                                        </th>
                                                                    </tr>
                                                                </table>
                                                            </th>
                                                            <th class="small-6 large-4 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:0;padding-left:8px;padding-right:16px;text-align:left;width:177.33px">
                                                                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                                        <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

1 Ответ

0 голосов
/ 15 мая 2018

Я запускал ваш HTML-код через Litmus, и он отлично смотрится с каждой версией Outlook Windows (2007, 2010, 2011, 2013, 2016, outlook.com, Outlook 365, почта Windows 10).Их версия Outlook может отличаться от версии, которую вы используете для тестирования.

Я предлагаю добавить width="580" к таблице в строке 308, которая является контейнером.Outlook будет уважать такую ​​команду, но иногда игнорирует width:580px; во встроенной таблице стилей.Ширина в таблице не должна портить ваши @media запросы.

<table width="580" align="center" class="container float-center" 
style="Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;
float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:580px">

Удачи.

...