我正在制作一个HTML电子邮件，它在多个电子邮件客户端/浏览器组合中完美地工作，我需要支持保存这一个问题，我只是无法弄清楚。我有一个表，这是600px(这是电子邮件的宽度)宽，在这里面有另一个表，这是由顶部和底部的"曲线"图像，其中有一些文字在中间。由于这封电子邮件是响应的，当浏览器窗口变小时，内部灰色表格只是"打破"。我知道这一点，因为我正在使用Litmus在众多浏览器/电子邮件客户端组合中进行测试。
注意:这只发生在电子邮件"调整大小"时，即只在移动电子邮件客户端上。如果你看下面的小提琴，我正在谈论的部分是开始于The Victims of Fraud...的内部灰色盒子。这个盒子(当调整大小时)就是不能玩得很好。我已经尝试了我能想到的一切，使用填充，删除填充，嵌套表和两者之间的一切。快把我逼疯了。
为了明白我的意思，打开小提琴，然后使HTML窗口变小。
这里有一个小提琴，试图说明我的意思:http://jsfiddle.net/39gzj/2/
更新:如果你看使用Firebug/Chrome开发者设置，你会看到，由于某种原因，表有这个神奇的2px添加到内部灰色表。这就是我要根除的东西!
更新2:再次尝试在评论中发布的内容，但仍然不起作用。
http://jsfiddle.net/39gzj/2/UPDATE 3 -我甚至尝试使用媒体查询显式地调整这个中间框的大小，但它仍然不起作用。这是更新的小提琴;http://jsfiddle.net/39gzj/5/
试着这样设置你的表:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc" style="border-radius: 5px; padding:30px;">
<tr>
<td>
text here. Put this inside a container with any media queries, should always stretch to full width.
</td>
</tr>
</table>
如果您将用于间距的静态宽度列拉出来，并对子表应用边距来完成间距，则所有内容都应该正确排列。
你试过使用min-width吗?来限制它将收缩到的大小。我假设如果它收缩，它只会收缩到断裂之前的那一点。我说的对吗?
对，所以我终于设法解决了这个问题，但需要使用媒体查询来修复中间行的"断裂"。我是这样做的;
使用媒体查询显式地设置每一行的大小!所以现在，图像可以正确地调整大小，但是一旦它达到移动视口的大小，它就会降至正确的大小(最大300px)，你可以在CSS中看到。这是更新后的小提琴
下面是有效的媒体查询:
@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
width:300px!important;
}
}
我知道这不是真正正确的方式来回答这个问题，因为我仍然没有修复最初的问题(为什么表是打破的)，所以不确定mod希望做什么与这个赏金我放在那里。
编辑:正如在评论中指出的那样，如果屏幕尺寸低于300px，电子邮件将自动变为正常大小，这可以通过更改媒体查询再次修复，但正如所指出的，这个答案目前解决了我需要支持的电子邮件客户端/浏览器组合的问题。