我目前正在开发一封电子邮件，该电子邮件在各个地方都有 2 列布局。我最初<div>对每一列都使用了标签，这在除旧版 Outlook 之外的所有电子邮件客户端中都非常有效（无论屏幕大小如何，列都会以 100% 的宽度呈现）。
为了解决 Outlook 问题，我只是将<div>标签更改为<td>'s. 现在，我在 iOS 邮件应用程序 (10.1.1) 中遇到了一个问题，它<td>拒绝在较小的屏幕上全宽显示。在下面的代码中，您可以看到这两个<td class="col-6-article">元素的固定宽度均为 300 像素，但是当我在 iOS 邮件应用程序中打开电子邮件时，这两个元素的屏幕宽度正好是 50%。这是截图：http: //imgur.com/a/0XsGz
有没有其他人在 iOS 邮件应用程序中遇到过这个问题？我无法弄清楚为什么我的内联样式和媒体查询被忽略了，仅仅是因为元素现在是表格单元而不是 div。
HTML（对不起，我尽力清理它）：
<table cellspacing="0" cellpadding="0" width="100%" align="center">
<tbody>
<tr style="vertical-align: top;">
<td width="100%">
<table class="container" style="max-width: 650px; margin: 0 auto;background:#fff;" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
<img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
<h3>Pledges to Ipsum fall short</h3>
<p>Abby Bruell | Jun 2015</p>
<p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
<table>
<tr>
<td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
<table style="margin: 0 auto;">
<tr height="5" style="height:5px"></tr>
<tr style="line-height:normal">
<td><a style="padding: 0; color: #ffffff" href="#">
<span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
</a>
</td>
<td>
<a style="padding: 0; color: #ffffff;" href="#">
<img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
</a>
</td>
</tr>
<tr height="5" style="height:5px"></tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-6-article" style="display:inline-block; width:300px !important; padding: 0 0 25px 15px;">
<img class="center fullwidth" style="display: block; width: 100%!important; max-width: 325px;" src="http://billykroger.com/img/1mLusPPr.jpg" width="325" />
<h3>Pledges to Ipsum fall short</h3>
<p>Abby Bruell | Jun 2015</p>
<p>Despite good intentions, donors to the London conference have failed to follow through will the pledges they made to aid Syrian refugees. Now, millions of women and children face the consequences of their inaction.</p>
<table>
<tr>
<td style="text-align: center; height: 33px; width: 160px; background: #007c76;">
<table style="margin: 0 auto;">
<tr height="5" style="height:5px"></tr>
<tr style="line-height:normal">
<td><a style="padding: 0; color: #ffffff" href="#">
<span style="color: #FFFFFF; font-size: 14px">READ MORE</span>
</a>
</td>
<td>
<a style="padding: 0; color: #ffffff;" href="#">
<img width="20" height="20" style="height: 20px !important; width: 20px !important;" src="http://cww.convio.net/images/content/pagebuilder/arrow.png" />
</a>
</td>
</tr>
<tr height="5" style="height:5px"></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS媒体查询：
@media screen and (max-width: 650px) and (max-device-width: 650px) {
.col-6-article {
width: 100% !important;
display: block !important;
}
}