浮动和显示块不适用于 Android 4.4 本机电子邮件

Question

我有一个有 2 列的 table，我在 td 上放了 display:block 或 float: left。我想在手机上将 TD 包装成全宽。但它显示 display:block 并且向左浮动在 Android 4.4 本机电子邮件上不起作用。 Android 4.2 本机电子邮件运行良好。

有人在更新到 Kit Kat 后遇到媒体查询问题吗？ display:block 好像没用了？

如果有人有任何解决此问题的提示，将不胜感激！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>

    <title></title>
    <style type="text/css">
        @media only screen and (max-device-width:740px) {
            td[class="float"] { display:block !important;float: left !important; width: 100% !important;} 
            td[class="float-red"] { display:block !important;float: left !important; width: 100% !important;background-color:yellow !important; }
        }

    </style>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" bgcolor="#ffffff">
    <tr>
        <td valign="top" align="center">
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="outer">
                <tr>
                    <td valign="top" align="center">
                        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="inner">
                            <tr>
                                <td width="300" bgcolor="red" class="float-red">Testing  Testing</td>
                                <td width="300" bgcolor="blue" class="float">Testing  Testing</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Answer 1

更新后，Android 不再支持 TD 响应式设计技术（有关详细信息，请参见此处 - https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design）。

从那里你有几个选项可以解决这个问题。

1.) 使用 "align" 从 TD 切换到 table 布局。（请参阅下面的选项 2 - http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/）这可能会导致 table 之间的对齐和间距出现一些问题（例如，Outlook 喜欢在嵌套的 table 之间添加 10px 的间距）等。有条件代码等可以帮助解决这些问题，它主要只需要练习和大量测试。

2.) 将您的 TD 更改为 TH。虽然它不再支持响应式 TD，但它确实支持响应式 TH。（有关更多信息，请参见此处 - http://labs.actionrocket.co/td-or-not-to-td-that-is-now-a-question）切换到 TH 时需要考虑一些事项。例如，默认情况下 TH 通常具有 font-weight: bold 并居中对齐。您还需要将您的内容包装在 table 中的 TH 中以便更好地控制。将填充和边距等添加到 TH 与将其添加到 TD 的效果大不相同。

没有真正完美的解决方案，但如果你已经建立了基于TD响应式设计的模板，最简单的过渡应该是改为TH。我会阅读动作火箭文章并进行一些测试，但应该相当容易。

浮动和显示块不适用于 Android 4.4 本机电子邮件

Float and display block not working on Android 4.4 Native Email

email

html-email