是否有等效于 HTML 电子邮件的 CSS 最大宽度？

Posted 2023-02-24

【中文标题】是否有等效于 HTML 电子邮件的 CSS 最大宽度？

【英文标题】：Is there an equivalent of CSS max-width that works in HTML emails?

【发布时间】：2011-01-26 10:22:55

【问题描述】：

我正在尝试创建一个 html 电子邮件，它将在所有广泛使用的电子邮件客户端中正确显示。我将整个电子邮件包装在一个表格中，并且我希望它的宽度达到可用宽度的 98%，但不超过 800 像素。像这样： <table style="width:98%; max-width:800px;">

但我没有这样做，因为according to this Outlook 2007 不支持 CSS 宽度属性。

相反，我正在这样做： <table width="98%">

有没有办法在不依赖 CSS 的情况下也设置最大宽度？

【问题讨论】：

我已经将接受的答案更新为来自@MarkNugent 的答案，因为这似乎已经引起了共识——即使它来得太晚了 4 年对我没有用处。 :)

【参考方案1】：

这是对我有用的解决方案

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;" >&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" ><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" >&nbsp;</td></tr>
</table>

【讨论】：

你能提供一个更简洁的例子吗，里面有很多东西不是解决问题所必需的

@EdL 的想法是是获取电子邮件友好max-width 的最简洁方式。整个事情将取代<div style="max-width: ...px">...</div>。对于我在发现这个要点时正在处理的电子邮件，这是使 Outlook 2010、2013 和 2016 看起来正确的唯一解决方案。

@henry 我更多地指的是所有 cellpadding 字体大小属性等。图像是一个棘手的问题，因为除非您指定 作为属性，其中 500 是以像素为单位的宽度将使图像变为全尺寸（wrt。图像文件）这通常会导致固定宽度。

保持原样，因为它不是我的代码——我只是从要点中引用它——但我已经把它变成了一个社区 wiki。我认为是有必要明确指定0px paddings 和margins 以及0 cellpadding 和cellspacing。可以指定line-height 代替font-size 来填补height 不被尊重的时间（我想在所有trs 上测试它，然后在所有tds 上测试它准确查看需要的位置）。 @EdL 如果您能够获得一个更轻量级的解决方案以及这个很棒的解决方案 - 请在此处和链接的要点中发布它

【参考方案2】：

聚会有点晚了，但这会完成的。我将示例保留为 600，因为这是大多数人会使用的：

与 Shay 的示例类似，除了此 还包括 max-width 以在其他支持的客户端上工作，以及防止扩展（媒体查询）的第二种方法Outlook '11 需要。

在头脑中：

  <style type="text/css">
    @media only screen and (min-width: 600px)  .maxW  width:600px !important;  
  </style>

在体内：

<!--[if (gte mso 9)|(IE)]><table  align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

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

这是另一个使用中的例子：Responsive order confirmation emails for mobile devices?

【参考方案3】：

是的，有一种方法可以使用表格模拟 max-width，从而为您提供响应式和 Outlook 友好的布局。更重要的是，这个解决方案不需要条件 cmets。

假设您想要一个居中的div 和max-width 的350px。您创建一个表格，将宽度设置为100%。该表连续三个单元格。将中心TD 的宽度设置为350（使用HTML width 属性，而不是CSS），然后就可以了。

如果您希望内容左对齐而不是居中对齐，只需省略第一个空单元格即可。

例子：

<table border="0" cellspacing="0" >
    <tr>
        <td></td>
        <td >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> 

在 jsfiddle 中，我给表格添加了一个边框，这样您就可以看到发生了什么，但显然您在现实生活中并不需要这样的边框：

http://jsfiddle.net/YcwM7/

【讨论】：

这是最好的答案，每个人都在这里^^^。忽略接受的答案和条件答案。

只是为了节省一些时间，至少需要一个空的

元素，否则带有内容的 将拉伸以填满整个 。但这绝对是所提供的解决方案中最好的。

@Phyllis Sutherland 您可以尝试删除内联 img 大小并将其替换为：style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"

小心不要像我一样在内部宽度上添加单位，否则它不起作用！即不要做

@PhyllisSutherland 找到了图像修复：<img src="file.jpg" "width="350" alt="" style="display:block;width:100%" />litmus.com/community/discussions/…

【参考方案4】：

您可以使用条件 html cmets 为 Outlook 2007 执行一个技巧。 下面的代码将确保 Outlook 表格是 800px 宽，它不是最大宽度，但它比让表格跨越整个窗口更好。

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

【讨论】：

很好的建议，但由于它是一个 id 选择器而不是一个类，因此您可以通过使用 table 元素上的 width attr 来节省一些输入

这很棒。除了一个问题，通过设置宽度，Outlook 不会让电子邮件缩小到小于给定尺寸。通过不设置宽度，电子邮件将扩展到整个屏幕。选择你的毒药:)

【参考方案5】：

简短的回答：不。

长答案：

固定格式更适合 HTML 电子邮件。根据我的经验，当涉及到 HTML 电子邮件时，你最好假装它是 1999 年。尽可能在表格定义中明确并使用 HTML 属性 ()，而不是 CSS (style="width:650px")。使用固定宽度，没有百分比。一个 650 像素宽的表格是安全的选择。使用内联 CSS 设置文本属性。

这与“HTML 电子邮件”中的工作原理无关，而是电子邮件客户端过多及其有限（有时在 Gmail、Hotmail 等情况下故意如此）呈现 HTML 的能力。

【讨论】：

是的，这正是我的预期，但我想我会问的。

将固定宽度设置为 650 会使您的电子邮件在移动电子邮件客户端中看起来很糟糕。

-1：看起来很糟糕，因为移动设备在现实世界中的尺寸相对较小。这意味着如果不进行缩放和平移，您设计中的文本将变得难以阅读。查看 Campaign Monitor 指南Responsive Email Design。

-1 也是因为我刚刚在移动客户端中处理过这个问题，而固定宽度正是我的问题。

2015 年，移动设备无处不在。你是说为了愚蠢的前景而忘记移动设备？我说，忘记前景。以及来自 Microsoft 的所有其他糟糕产品。