4

我正在处理一个 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/

4

4 回答 4

1

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

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

这是有效的媒体查询：

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

我知道这并不是回答这个问题的正确方法，因为我还没有解决最初的问题（为什么桌子坏了）所以不知道 mods 想用我放在那里的这个赏金做什么。

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

于 2013-04-30T11:59:04.043 回答
1

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

于 2013-04-29T15:36:56.383 回答
1

您是否尝试过使用最小宽度。限制它将缩小到的大小。我会假设如果它收缩它应该只收缩到它破裂之前的点。我对吗？

于 2013-04-29T18:38:24.917 回答
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>
于 2013-04-24T14:57:35.013 回答