是否有等效于 HTML 电子邮件的 CSS max-width？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2426072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an equivalent of CSS max-width that works in HTML emails?
提问by Tim Goodman
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
我正在尝试创建一个 HTML 电子邮件，它将在所有广泛使用的电子邮件客户端中正确显示。我将整个电子邮件包装在一个表格中，我希望它的宽度最多为可用宽度的 98%，但不超过 800 像素。像这样：
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to thisOutlook 2007 does not support the CSS width property.
但我不会那样做，因为根据这个Outlook 2007 不支持 CSS 宽度属性。
Instead, I'm doing this:
<table width="98%">
相反，我这样做：
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
有没有办法在不依赖 CSS 的情况下设置最大宽度？
回答by Mark Nugent
Yes, there is a way to emulate max-widthusing a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
是的，有一种方法可以max-width使用表格进行模拟，从而为您提供响应式和 Outlook 友好的布局。更重要的是，此解决方案不需要条件注释。
Suppose you want the equivalent of a centered divwith max-widthof 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TDto 350(using the HTML widthattribute, not CSS), and there you go.
假设你想要的中心相当于div用max-width的350px。您创建一个表格，将宽度设置为100%。该表具有连续的三个单元格。将中心的宽度设置TD为350（使用 HTMLwidth属性，而不是 CSS），然后就可以了。
If you want your content aligned left instead of centered, just leave out the first empty cell.
如果您希望您的内容左对齐而不是居中，只需省略第一个空单元格。
Example:
例子：
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
在 jsfiddle 中，我给表格设置了一个边框，这样你就可以看到发生了什么，但显然你不会在现实生活中想要一个边框：
回答by Shay Erlichmen
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
您可以使用条件 html 注释为 Outlook 2007 执行一个技巧。
下面的代码将确保 Outlook 表格的宽度为 800 像素，它不是最大宽度，但它比让表格跨越整个窗口效果更好。
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
回答by Diodeus - James MacFarlane
The short answer: no.
简短的回答：不。
The long answer:
长答案：
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
固定格式更适用于 HTML 电子邮件。根据我的经验，当涉及到 HTML 电子邮件时，您最好假装是 1999 年。明确并在表格定义中尽可能使用 HTML 属性 (width="650")，而不是 CSS (style="width:650px")。使用固定宽度，没有百分比。650 像素宽的表格宽度是一个安全的赌注。使用内联 CSS 设置文本属性。
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
这与“HTML 电子邮件”中的工作原理无关，而是过多的电子邮件客户端及其有限的（有时在 Gmail、Hotmail 等情况下是故意如此）呈现 HTML 的能力的问题。
回答by John
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
聚会有点晚了，但这会搞定的。我将示例保留为 600，因为这是大多数人会使用的：
Similar to Shay's example except this also includes max-widthto work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
与 Shay 的示例类似，除了这还包括用于其他支持的客户端的max-width，以及防止 Outlook '11 所需的扩展（媒体查询）的第二种方法。
In the head:
在头部：
<style type="text/css">
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
在身体里：
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
这是另一个使用中的示例：用于移动设备的响应式订单确认电子邮件？
回答by henry
This is the solution that worked for me
这是对我有用的解决方案
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to @philipp-klinz
https://gist.github.com/elidickinson/5525752#gistcomment-1649300，感谢@philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
