Question

我正在开发一个HTML电子邮件，它完全适用于我需要支持的多个电子邮件客户端/浏览器组合，除了这个我无法弄清楚的问题。我有一个宽600px（这是电子邮件的宽度）的表格，其中有另一个表格，其中包含一个顶部和底部“曲线”图像，中间有一些文字。由于此电子邮件是响应式的，当浏览器窗口变小时，内部灰色表只是“中断”。我知道这是因为我使用Litmus来测试多种浏览器/电子邮件客户端组合。

注意：这仅在电子邮件“调整大小”时发生，即仅在移动电子邮件客户端上发生。如果你看下面的小提琴，我所谈论的部分是从The Victims of Fraud...开始的内部灰色框。这个盒子（调整大小时）不会很好玩。我已经尝试了所有我能想到的东西，使用填充，删除填充，嵌套表以及介于两者之间的所有内容。这让我疯狂。

为了看清楚我的意思打开小提琴，然后将HTML窗口缩小。

这是一个小提琴，试图说明我的意思：http://jsfiddle.net/39gzj/2/

更新：如果您使用Firebug / Chrome开发者设置，您会看到由于某种原因，该表将此魔术2px添加到内部灰色表中。这就是我需要根除的东西！

更新2：再次尝试在评论中发布的内容，但这又不起作用。

http://jsfiddle.net/39gzj/2/

更新3 - 我甚至尝试使用媒体查询来显式调整此中间框的大小，但它仍然无效。这是更新的小提琴; http://jsfiddle.net/39gzj/5/

Answer 1

尝试这样设置你的表：

<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>

Answer 2

如果您将静态宽度列拉出用于间距并将边距应用于子表以完成间距，则所有内容都应正确排列。我想象间距柱是你焦虑的来源。

Answer 3

你尝试过使用min-width吗？限制它缩小的大小。我认为如果它收缩它应该只缩小到它破裂之前的点。我是对的吗？

Answer 4

是的，所以我终于设法解决了这个问题，但是需要使用媒体查询来修复那个中间行的“破坏”。这就是我所做的;

使用媒体查询显式调整每一行的大小！现在，图像正确调整大小，但一旦达到移动视口大小，它就会快速缩小到CSS中可以看到的正确大小（最大300px）。这是更新的fiddle

这是有效的媒体查询：

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
    *[id=mobile] {
        width:300px!important;
    }
}

我知道这不是解决这个问题的正确方法，因为我还没有解决最初的问题（为什么桌子会破坏）所以不确定mods想要用这个奖励做什么我放在那里。

编辑：正如评论中所指出的，如果屏幕尺寸低于300px，电子邮件将再次自动变为正常尺寸，这可以通过更改媒体查询再次修复，但如上所述，此答案目前解决了我需要支持的电子邮件客户端/浏览器组合的问题。

响应式电子邮件表不断破坏 - 是什么导致了这一点？

4 个答案: