html - 为什么行中的元素在响应式布局的苹果邮件代理上折叠？

问题描述

在响应时，其他 2 个或更多元素正在崩溃（http://prntscr.com/m2x4ke）我做错了什么？除了 MacOS iOS 电子邮件代理，它无处不在。我已经尝试了我所知道的一切。显示更改和宽度 100% 但它不起作用。所有 !important 都在他们的位置。有没有人对这个问题有任何想法。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta name="viewport"
          content="min-width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,  date=no">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[href^="x-apple-data-detectors:"] {
            color: inherit;
            text-decoration: inherit;
        }

        html {
            /*-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;*/
        }
    </style>
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml><![endif]-->

</head>
<body style="-webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; ">

<style>
    @media screen and (max-width: 650px) {
        table {
            border-spacing: 0;
        }

        .container {
            width: 100% !important;
            max-width: 600px;
            min-width: 0 !important;
        }

        .resp-td {
            width: 239px !important;
            max-width: 100%;
            margin: 0 auto;
            display: block;
            padding: 0 !important;
        }


        .resp-td {
            width: 100% !important;
        }

        .resp-td  {
            padding: 0 0 50px 0 !important;
        }

        .number-color a {
            color: #9a9b9b !important;
            text-decoration: none !important;
        }

        * {
            -webkit-text-size-adjust: none;
            box-sizing: border-box !important;
        }
    }

    @media screen and (max-width: 380px) {
        .resp-td {
            /*width: 68.3% !important;*/
        }
    }

    @media screen and (max-width: 320px) {
        .resp-td {
            /*width: 82.3% !important;*/
        }
    }
</style>
<!--[if gte mso 9]>
<style>
    ul, ol, dl {
        display: block;
        list-style-position: outside !important;
        margin: 0 0 10px 18px;
        padding: 0;
        text-align: left;
    }

    ul li {
        margin: 0 0 0 10px;
        padding-left: 20px;
    }

    ol li {
        margin: 0 0 0 10px;
        padding-left: 20px;
    }

    li:last-child, li:last-of-type {
        margin-bottom: 0;
    }

    dt {
        font-weight: bold;
        line-height: 18px;
        margin: 0 0 4px;
        padding: 0;
        text-align: left;
        vertical-align: middle;
    }

    dd {
        line-height: 18px;
        margin: 0 0 8px;
        padding: 0;
        text-align: left;
        vertical-align: middle;
    }
</style>
<![endif]-->

<table align="center" cellpadding="0" cellspacing="0"
       style="background-color:#ffffff; font-family: sans-serif; margin:0; padding:0; width:100% !important; text-align: left; border-spacing: 0; border-collapse: collapse; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;mso-cellspacing: 0; mso-padding-alt: 0;">
    <tbody>
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" class="container" align="center" width="600"
                   style="mso-cellspacing: 0; mso-padding-alt: 0;border-collapse: collapse; border-spacing: 0;  width: 600px; max-width: 600px; min-width: 600px;margin: 0 auto; font-family: sans-serif;">
                <tbody>
                <tr>
                    <td style="padding-left: 10px; padding-right: 10px;">
                        <table cellpadding="0" cellspacing="0" width="100%">
                            <tbody>
                            <tr>
                                <td class="resp-td" width="33.3%" style="padding-right: 6px;">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <tbody>
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
                                                    <tbody>
                                                    <tr>
                                                        <td style="padding: 10px 0 10px 0">
                                                            <a href="#"><p
                                                                    style="color: #ffffff; font-family: sans-serif;
                                                        font-size: 15px;
                                                        font-weight: 700;
                                                        line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
                                                                Ipsum</p></a>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td class="resp-td" width="33.3%" style="padding-left: 4px;padding-right: 4px;">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <tbody>
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
                                                    <tbody>
                                                    <tr>
                                                        <td style="padding: 10px 0 10px 0">
                                                            <a href="#"><p
                                                                    style="color: #ffffff; font-family: sans-serif;
                                                        font-size: 15px;
                                                        font-weight: 700;
                                                        line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
                                                                Ipsum</p></a>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                </td>
                                <td class="resp-td" width="33.3%" style="padding-left: 6px;">
                                    <table cellpadding="0" cellspacing="0" width="100%">
                                        <tbody>
                                        <tr>
                                            <td>
                                                <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#BF1C1F">
                                                    <tbody>
                                                    <tr>
                                                        <td style="padding: 10px 0 10px 0">
                                                            <a href="#"><p
                                                                    style="color: #ffffff; font-family: sans-serif;
                                                        font-size: 15px;
                                                        font-weight: 700;
                                                        line-height: 25px;margin: 0; padding:0; text-align: center;">Lorem
                                                                Ipsum</p></a>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
它应该低于一个。像块元素一样。普通的显示块根本没有帮助。我已经崩溃了其他 2 个元素
标签： htmliosmacoshtml-emailresponsive
html - 为什么行中的元素在响应式布局的苹果邮件代理上折叠？

问题描述

解决方案

推荐阅读
