响应性电子邮件表不断出错——这是什么原因造成的?

I'm working on an HTML Email which is working perfectly in the multiple email client/browser combinations I need to support save for this one problem which I just cannot figure out. I have a table that is 600px (which is the width of the email) wide and within this there is another table which is comprised of a top and bottom 'curve' image which has some text in the middle. As this email is responsive, when the browser window is made smaller the inner grey table just 'breaks'. I know this because I am using Litmus to test across a multitude of browser/email clients combinations.

我正在处理HTML电子邮件，它在我需要支持的多个电子邮件客户端/浏览器组合中工作得很好，这是我无法解决的问题。我有一个600像素(邮件的宽度)宽的表格，在这个表格中还有一个表格，它由一个顶部和底部的“曲线”图像组成，中间有一些文本。由于这封邮件是有响应的，当浏览器窗口被缩小时，内部的灰色表格就会“中断”。我之所以知道这一点，是因为我正在使用“试金石”来测试各种浏览器/电子邮件客户端组合。

Note: this ONLY happens when email is "resized" i.e. only on mobile email clients. If you look at the below fiddle, the portion I am talking about is the inner grey box that begins The Victims of Fraud.... This box (when resized) just will not play nice. I have tried everything I can think of, using padding, removing padding, nested tables and everything inbetween. It's driving me crazy.

注意:只有当电子邮件被“调整大小”时才会发生这种情况，也就是说，只有在移动电子邮件客户端才会发生这种情况。如果你看看下面的小提琴,我谈论的是部分内部的灰色框,开始欺诈的受害者....这个框(当调整大小时)不能正常运行。我尝试了所有我能想到的方法，使用填充、删除填充、嵌套表和中间的所有东西。我快疯了。

In order to see what I mean open the fiddle then make the HTML window smaller.

为了明白我的意思，打开小提琴，然后使HTML窗口变小。

Here is a fiddle to try and illustrate what I mean: http://jsfiddle.net/39gzj/2/

这里有一个例子可以说明我的意思:http://jsfiddle.net/39gzj/2/。

UPDATE: If you look using Firebug / Chrome Developer Settings, you will see that for some reason the table has this magic 2px added to the inner grey table. This is what I need to eradicate!

更新:如果您使用Firebug / Chrome开发人员设置查看，您将看到，由于某些原因，该表在内部灰色表中添加了这个神奇的2px。这就是我要根除的!

UPDATE 2: Tried again with what was posted in the comments but again this does not work.

更新2:再次尝试在评论中发布的内容，但这同样不奏效。

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

UPDATE 3 - I've even tried using a media query to explicitly resize this middle box but it still doesn't work. Here is the updated fiddle; http://jsfiddle.net/39gzj/5/

更新3——我甚至尝试过使用媒体查询显式地调整中间框的大小，但它仍然不起作用。这是最新的小提琴;http://jsfiddle.net/39gzj/5/

4 个解决方案

#1

Try setting up your table like this instead:

试着把你的桌子摆成这样:

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

#2

If you pull your static-width columns out that you're using for spacing and apply margin to the sub-tables to accomplish your spacing everything should line up properly. I'd imagine the spacing columns are the source of your angst.

如果你把静态宽度的列拉出来，你用它来设置间隔，然后在子表上加上空白来完成间隔，那么所有的东西都应该对齐。我认为间隔列是你焦虑的根源。

#3

Have you tried using min-width. To limit the size that it will shrink to. I would assume that if it shrinks it should only shrink to the point before it breaks. Am I right?

你试过用最小宽度吗?限制它的尺寸。我假设，如果它收缩，它只会收缩到它断裂之前的点。我说的对吗?

#4

Right, so I finally managed to fix this but needed to use the media queries to fix the "breaking" of that middle row. Here's what I did;

是的，所以我最终解决了这个问题，但是需要使用媒体查询来修复中间一行的“中断”。这是我做了什么;

Use a media query to explicitly size EVERY SINGLE ROW! So now, the image resizes properly, but once it gets to mobile viewport size it just snaps down to the correct size (max 300px) which you can see in the CSS. Here is the updated fiddle

使用媒体查询显式地对每一行进行大小!现在，图像大小调整好了，但是当它到达移动viewport大小时，它就会自动切换到正确的大小(max300px)，你可以在CSS中看到它。这是最新的小提琴

Here is the media query that worked:

下面是工作的媒体查询:

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

This I know isn't really the correct way to answer this as I still haven't fixed the initial problem (why the table is breaking) so no sure what the mods wish to do with this bounty I put out there.

我知道这并不是正确的答案，因为我还没有解决最初的问题(为什么桌子坏了)，所以我也不知道mods会怎么处理我的赏金。

EDIT: As pointed out helpfully in the comments, if the screen size is BELOW 300pxthe email will automatically become normal size again, this can again be fixed by changing the media query but as noted, this answer currently solves issues specifically for the email clients/browser combinations I need to support.

编辑:如评论中所指出的，如果屏幕尺寸小于300pxemail将会自动恢复正常大小，这可以通过改变媒体查询再次修复，但是正如所指出的，这个答案目前解决了我需要支持的邮件客户端/浏览器组合的问题。

#1