Windows Outlook 忽略正文容器宽度

【问题标题】：Windows Outlook ignoring body container widthWindows Outlook 忽略正文容器宽度
【发布时间】：2018-05-16 02:52:01
【问题描述】：

我正在测试我的电子邮件通讯，除了 Windows Outlook 之外，一切似乎都运行良好。它适用于 osx Outlook，但不适用于任何版本的 Windows。基本上outlook似乎忽略了主容器，一切都展开了。它还破坏了样式，尤其是文本和 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">

【问题讨论】：

  • 请发布您的html代码。最有可能的问题是您需要在设置电子邮件宽度的表格中添加width="600"，因为 Outlook 倾向于忽略样式表。
  • 我附上了一个代码笔链接。 codepen.io/joefus1o4/pen/RyyyLL?editors=1000
  • 我不会浪费我的时间去缩小你的代码来帮助你。我很肯定我可以帮助你，但你为什么要让人们跳过篮球来做到这一点？发布您的代码，并根据您的问题正确格式化。
  • 我很抱歉。第一次将代码或问题发布到堆栈溢出。我相信代码现在应该是正确的。链接是一样的。

标签： sass outlook zurb-foundation html-email newsletter


【解决方案1】：

我通过 Litmus 运行了您的 html 代码，它在每个版本的 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">

祝你好运。

【讨论】：

  • 感谢您的帮助。奇怪的是，它在试金石中对你来说很好。我仍然遇到同样的问题。身体仍在全屏显示。我正在使用有关酸的电子邮件，这可能是它们的问题吗？
  • Litmus 使用的 Outlook 2016 版本号可能与使用 Email on Acid 版本的 Outlook 2016 不同。Microsoft 一直在制作补丁并与 Litmus 合作修复 Outlook 问题。
猜你喜欢
  • 2015-05-21
  • 1970-01-01
  • 2019-08-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-08-15
  • 1970-01-01
  • 2014-09-28
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode