HTML 电子邮件以奇怪的分辨率中断

Question

我已经构建了一个响应式 HTML 电子邮件，但是，在它到达媒体查询之前，它在 20 像素的分辨率差异之间中断。在 600px 和 620px 之间我不明白为什么。一切都经过了验证程序、解析等，并经过验证。我想因为这种响应中断导致 YMail 和其他一些客户端出现奇怪的监视。有什么想法吗？

JSFIDDLE: http://jsfiddle.net/V6GQ9/

@media only screen and (max-width: 600px) {
  a[class="btn"] {
    display: block!important;
    margin-bottom: 10px!important;
    background-image: none!important;
    margin-right: 0!important;
  }
  div[class="column"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-left"] {
    width: auto!important;
    float: none!important;
  }
  div[class="column-right"] {
    width: auto!important;
    float: none!important;
  }
  }

Answer 1

您的标记中有两件事导致了问题。

1) 具有body-wrap 类的表格需要设置cellpadding、cellspacing 和border 属性:

  <table class="body-wrap" border=0 cellpadding=0 cellspacing=0>
  </table>

原因是由于遗留和浏览器特定的默认客户端在此处添加了几个像素，导致内容区域小于 600 像素，因此将右列向下推。

2) 当您将媒体查询宽度设置为 600px 时，它不会考虑右侧滚动条，它会占用内容空间中的几个像素。您会注意到，如果您删除底部内容并且没有滚动条，差异量就会减少。

解决方案是将媒体查询 max-width 设置为更大的值，例如 620px 或减少两列所占用的宽度内容。

此外，您还可以在表格上设置 border、cellpadding、cellspacing 属性，但如果将媒体查询 max-width 增加到容纳它。

欢迎使用电子邮件设计。这是一个完全不同的蜡球:)