求助：iOS版Outlook中邮件无法通过CSS@media堆叠

问题根源 #

iOS版Outlook对CSS媒体查询的解析逻辑特殊，常规的display:block+width:100%无法覆盖表格单元格（<td>）的默认布局规则，导致堆叠效果失效。

具体修复方案 #

1. 强化.drop选择器优先级并补充强制布局样式 #

修改媒体查询中的.drop样式，使用更具体的选择器（包含父级table），并添加clear:both确保单元格独占一行：

@media only screen and (max-width: 700px) {
  /* 保留原有其他样式 */
  body table .drop {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    min-width: 100% !important; /* 强制占满容器宽度 */
  }
}

2. 覆盖HTML中<td>的固定宽度属性 #

你代码中部分<td>带有width="180"/width="15"的HTML属性，这类属性优先级高于CSS，需在媒体查询中专门覆盖：

@media only screen and (max-width: 700px) {
  /* 新增此段 */
  body table td.drop[width="180"],
  body table td.drop[width="15"] {
    width: 100% !important;
  }
}

3. 添加iOS Outlook专属媒体查询 #

iOS版Outlook支持-webkit-min-device-pixel-ratio前缀，可针对性添加媒体查询确保样式生效：

@media only screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 700px) {
  body table .drop {
    display: block !important;
    width: 100% !important;
    clear: both !important;
  }
}

4. 优化内联样式与CSS的配合 #

将HTML中<td>的宽度属性改为内联样式（如style="width:180px;"），而非原生HTML属性，这样CSS媒体查询更容易覆盖：

<!-- 修改前 -->
<td width="180" class="drop" valign="top">
<!-- 修改后 -->
<td style="width:180px;" class="drop" valign="top">

测试建议 #

邮件客户端兼容性差异大，修改后建议使用专业邮件测试工具验证效果，确保在iOS版Outlook及其他客户端均正常显示。

内容的提问来源于stack exchange，提问作者Julia