iOS 10 邮件 HTML 未正确响应答案

【问题标题】：iOS 10 Mail HTML not responding correctlyiOS 10 邮件 HTML 未正确响应
【发布时间】：2023-03-24 12:22:01
【问题描述】：

我正在创建时事通讯，但发现了奇怪的行为。

我有一张桌子，里面有 2 个，我希望它们是一个块，宽度为 100%，但会发生以下情况：

它还会破坏邮件的其他部分。我已经尝试了很多...每个视口，最大宽度，最小宽度，我不知道该怎么做...

我已验证，媒体查询正常

我需要一些特殊的技巧吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" style="box-sizing: border-box;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />    <meta name=”x-apple-disable-message-reformatting” />
    <meta property="og:title" content="*|MC:SUBJECT|*">
    <title>*|MC:SUBJECT|*</title>


    <style type="text/css">.inhalt li a {line-height:26px;}</style>


<style type="text/css">
body {
font-family: "Helvetica", "Arial";
}
img {
margin: 0; padding: 0; border: none;
}
body {
color: #000000; z-index: -3; font-family: "Helvetica", "Arial";
}
@media only screen and (max-width: 599px) {
  table[yahoo] {
    display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  .yahoo {
    display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  }
  .desktop {
    display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
  }
  [desktop] {
    display: none !important; height: 0px !important; max-height: 0 !important; line-height: 0px !important; font-size: 0px !important; overflow: hidden !important; mso-hide: all;
  }
  .mobile {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  [mobile] {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  .mobileshow_inlineblock {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  [mobileshow_inlineblock] {
    height: auto !important; max-height: none !important; line-height: normal !important; font-size: medium !important; overflow: visible !important; mso-hide: none !important;
  }
  .mobile {
    display: block !important;
  }
  [mobile] {
    display: block !important;
  }
  .mobileshow_inlineblock {
    display: inline-block !important;
  }
  [mobileshow_inlineblock] {
    display: inline-block !important;
  }
  .hidden {
    display: none !important;
  }
  .mblock {
    position: relative; display: table-row !important;
  }
  .mblock > tr {
    display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .mblock > tr > td {
    display: block; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .underlined {
    text-decoration: underline !important;
  }
  .mcol {
    width: 100% !important; padding: 0 20px !important;
  }
  .halfcol {
    width: 120px !important;
  }
  .prehead td {
    height: 66px !important;
  }
  .logo {
    width: 115px !important; height: 26px !important;
  }
  .preheadtxt {
    font-size: 8px !important; line-height: 11px !important;
  }
  .header_image {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  .headertxt {
    font-size: 16px !important; line-height: 24px !important;
  }
  .inhalttitle {
    font-size: 28px !important; line-height: 36px !important;
  }
  .inhaltlinks a {
    font-size: 16px !important; line-height: 24px !important; text-decoration: none !important;
  }
  .teaser {
    width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .pretitle {
    font-size: 16px !important; line-height: 20px !important;
  }
  .teasertitle {
    font-size: 28px !important; line-height: 36px !important;
  }
  .posttitle {
    font-size: 16px !important; line-height: 20px !important;
  }
  .teasertxt {
    font-size: 16px !important; line-height: 24px !important;
  }
  .mcol_teaser_1_pic {
    width: 100% !important; text-align: right;
  }
  .mcol_teaser_2_pic {
    width: 100% !important; padding-bottom: 20px !important;
  }
  .teaserpic {
    height: auto !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important;
  }
  .smallteaserlink {
    font-size: 22px !important;
  }
  .smallteaserpic {
    max-width: 100% !important; width: 100% !important; height: auto !important;
  }
  .footer .mcol a {
    text-decoration: underline !important;
  }
  .footer_leftpart {
    font-size: 16px !important; line-height: 34px !important;
  }
  .footer_rightpart {
    text-align: left !important;
  }
  .footer_copyright {
    width: 280px !important; padding: 0 20px !important; text-align: left; position: absolute; top: 100%; left: 0;
  }
  .type1 {
    font-size: 16px !important; line-height: 34px !important;
  }
  .type2 {
    font-size: 16px !important; line-height: 24px !important;
  }
}
</style>
</head>
<body bgcolor="#D8D8D8" style="box-sizing: border-box; font-family: 'Helvetica', 'Arial'; color: #000000; z-index: -3; margin: 0; padding: 0;">
<table bgcolor="#FFFFFF" class="body" cellspacing="0" cellpadding="0" yahoo="1" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0 auto; padding: 0; border: none;">
    <tr style="box-sizing: border-box;">
        <td align="left" valign="top" cellspacing="0" cellpadding="0" mainwrap style="box-sizing: border-box; margin: 0; padding: 0;">



<!-- // Begin Template teasertype2 \\ -->

<table yahoo width="600" class="mblock teaser teaser_2 yahoo" bgcolor="#ffffff" style="box-sizing: border-box; border-collapse: collapse; font-size: 0; width: 600px; margin: 0; padding: 0; border: none;">
    <tr style="box-sizing: border-box;">
        <td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
            <div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                LEFT
            </div>
        </td> <td width="260" class="mblock mcol" align="left" valign="top" style="box-sizing: border-box; margin: 0; padding: 0;">
            <div class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                RIGHT
            </div>
        </td>
    </tr>
</table>




<!-- // End Template teasertype2 \\ -->






<!--[if !mso]><!-->
<!--<![endif]-->

        </td>
    </tr>
</table>
</body>
</html>

目前的问题：

iOS 10 不接受“display: block;”关于“td”标签

【问题讨论】：

希望这个链接对你有帮助stackoverflow.com/questions/10556310/…
@vje1998 感谢tipp，但设置不同的文档类型不是电子邮件模板的选项，但它是一个很好的线索......我会继续挖掘，这对我来说现在是一个大问题
此代码适用于 ios 10.2 邮件客户端。它是 ios 10 特有的吗？
也许对campaignmonitor.com/css有帮助
@RohitAgre 我的手机上有 10.1.1，我将使用 10.2 进行升级和测试

标签： html css html-email newsletter

【解决方案1】：

我无法准确判断您的问题发生在哪里，但可以在上面提供的代码中看到很多重复。可能存在冲突、特异性问题，或者 iOS 邮件变得混乱并抛出了重要的 CSS 排除。

这是一个 600 像素宽的电子邮件的简化示例，其中包含两个堆叠的偶数列。我没有包含 大部分 CSS（与此问题无关）和大部分周围的 HTML。最后我还删除了孤立的。

CSS去<head>:

<style>
    @media screen and (max-width: 600px) {
        .mblock {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            direction: ltr !important;
        }
    }
</style>

和 HTML：

<!-- // Begin Template teasertype2 \\ -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
    <tr>
        <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
            <!--[if mso]>
            <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
            <tr>
            <td align="center" valign="top" width="600">
            <![endif]-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
                <tr>
                    <td align="center" valign="top" style="font-size:0;">
                        <!--[if mso]>
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
                        <tr>
                        <td align="left" valign="top" width="300">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                                        LEFT
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        <td align="left" valign="top" width="300">
                        <![endif]-->
                        <div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:300px; vertical-align:top;" class="mblock">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td class="txt pretitle" style="font-size: 12px; line-height: 14px; font-weight: bold; box-sizing: border-box; mso-line-height-rule: exactly; color: #000000; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;" mc:edit="pretitle2">
                                        RIGHT
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </td>
                        </tr>
                        </table>
                        <![endif]-->
                    </td>
                </tr>
            </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
<!-- // End Template teasertype2 \\ -->

此技术使用混合方法，它使用最大宽度和最小宽度来施加刚性基线（允许一些移动）并为无论如何都束缚在桌面上的 Outlook 施加固定的宽宽度（因此<!--[if !mso]> 的东西)。媒体查询可以在支持它的客户端（例如 iOS Mail）中进一步增强电子邮件。

编辑：其他文档类型和元信息：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
</head>

【讨论】：

我们使用计算机的原因是因为当他们看到大量信息或必须做繁琐的工作时不会感到困惑。碰撞是一个非常可能/很可能的场景
@PMARINA email clients have been known to get confused and disregard code
这是你能从这篇文章中得出的最荒谬的结论。它指出“任何额外的特殊字符都可能触发它完全过滤掉样式”和“最多支持 8192 Kb 的样式。（最近已更新到 16384 Kb”。请注意，两个引号都只指 gmail，什么都不说关于客户端变得“困惑”。这要么是由于 css 文件太大，要么是拼写错误，这两者都是开发人员的错误，而不是阅读代码的东西变得“困惑”。注意你链接的页面是如何仅适用于 gmail。我的观点仍然成立。
@TedGoas 您使用的是哪种文档类型？我想测试你的解决方案。
@Fribu 我编辑了我的答案以包含此信息+注释。

【解决方案2】：

尝试对表和表 td 使用 [class="classname"]。

table[class="mblock"],
table td[class="mblock"]  {
    width: 100% !important;
    display: block !important;
}

事实上，只要定位td 也可以；

td[class="mblock"] {
    width: 100% !important;
    display: block !important;
}

媒体查询的替代方法

我假设您在标题中的原始样式进行了某种转换（例如 MS Word ML）。

另一种方法，对于几乎（如果不是）所有都相当防弹，称为 Fab Four 技术，它不依赖媒体查询，这意味着您可以在客户端中获得自适应布局不支持；如; Outlook 和 Gmail。

JS Fiddle Here

Article on Medium

Example on Litmus

【讨论】：

问题不在于选择器，问题出在 td 上的“block”属性
您能告诉我们更多关于您如何发送这些电子邮件的信息吗？该块实际上适用于 td 在 ios 10.2 上，但我担心您的 HTML 在发送过程中是如何转换的。
我将它作为纯 html 发送，没有转换。我还尝试了一个非常简单的设置，带有块和 2 个 tds，没有别的，它对我不起作用。如果你有一个可行的例子，请给我一个预览（alexander@fribu.de）
我问的原因 - 我在你的纯 HTML 中看到了一些 Microsoft 标记 - 所以我假设你正在使用某种 MS 技术来发送，因此 HTML 被转换为结果使用 MS Word 处理标记。我这么说是因为我亲身经历过。尽管如此，我还是会使用诸如 Campaign Monitor 或类似的东西来设置相同的标记。他们所做的就是以正确的方式转换纯 HTML。
不，这个 microsoft 标记用于在 Outlook 客户端上显示背景图像。