我遇到一个问题,其中iOS Mail增加了文本大小,将其驱动到表格单元之外。该表在桌面Outlook / Web邮件上呈现良好,但在Mail应用程序上失败。我尝试添加自动换行,但这一点都没有影响。这是将文本调整为框大小还是将框调整为文本大小的方法吗?
谢谢!

html - 表文本在iOS邮件中的单元格外部运行-LMLPHP

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
      <!-- CSS Reset -->
    <style>

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* What is does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
            overflow-wrap: break-word;
              word-wrap: break-word;        }

        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        .counter {
        font-size: 40px;
        line-height: 40px;
        font-weight: 400;
        color: #73879C;
        border-left: 2pxsolid#ADB2B5;
        float: left;

        }
        .subcounter {
        font-size: 10px;font-weight: 300;
        border-left: 2pxsolid#ADB2B5;
        float: left;
        }

        }
    </style>


            <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style="">
                <tr>
                    <td style="padding: 20px 0; text-align: center; height="75" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                        <br><br><div class="counter">99,999,999</div>
                        <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style="">
                            <tr>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% WoW
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% MoM
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% YoY
                                </td>
                            </td>
                        </table>
                    <td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                        <br><br><div class="counter">99,999,999</div>
                        <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style="">
                            <tr>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% WoW
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% MoM
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% YoY
                                </td>
                            </td>
                        </table>
                    </td>
                    <td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                        <br><br><div class="counter">99,999,999</div>
                        <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style="">
                            <tr>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% WoW
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% MoM
                                </td>
                                <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555">
                                    <div class="subcounter">&#8964; 10% YoY
                                </td>
                            </td>
                        </table>
                    </td>
                </tr>
            </table>
</body></html>  

最佳答案

我必须在表CSS中删除它:

table-layout: fixed !important;

10-05 20:27
查看更多