使用特定 css 定位 Windows Live Mail答案

【问题标题】：Target Windows Live Mail with specific css使用特定 css 定位 Windows Live Mail
【发布时间】：2011-09-21 09:43:54
【问题描述】：

长话短说，我正在制作 HTML 电子邮件（是的，我知道）。我已经让它在 GMail、Yahoo Mail、Thunderbird 和 Outlook 2003 中看起来很棒（尚未测试 07...）。唯一的问题是 Hotmail（Windows Live Mail）。它根本不支持背景图像这一事实并不困扰我的布局......这是因为布局的原因，我需要将表格的宽度设置为设定值（550px）而不是百分比 (80%)，否则我的标题图像将只是漂浮在空间中并且看起来很难看。

所以我现在有两个选项 - 创建一个特定于 Hotmail 的 css 规则以将宽度设置为静态值（我不知道这是否可能）或让我的邮件模板在根据收件人是否属于“@hotmail.com”来飞行。我更喜欢前者而不是后者。

澄清：为简单起见，想象一个 550 像素宽 x 150 像素高的 div。它有一个带有repeat-x的背景图像。在那个 div 里面，我有一个 150px 高和 550px 宽的 img。如果外部 div 设置为视口的 80%，它应该向左扩展，从而暴露重复的背景。这是预期的。由于 Hotmail 不显示背景图片，因此它只是一个空白区域。

进一步说明：转到here 以查看我的意思的示例。

【问题讨论】：

在 Outlook/hotmail 新闻通讯中较少支持 CSS。所以更好的选择是你必须使用而不是背景图片
你应该检查this out它有一些设计html电子邮件的非常巧妙的技巧。
对不起，我可能误导了你 - 我有一个通常重复 -x 的背景图像，但是当它不存在时，我的常规标题图像（它绝不是背景图像）看起来像它漂浮在白色空间中。我将修复原始问题以反映这一点。
它在 Outlook 2007 中也会如此。你真的应该使用绝对宽度和背景颜色，当背景图像不受支持时就会出现。否则这是行不通的。
@Steve Day - 查看您的链接，关于“为背景图像提供后备颜色”的部分几乎完全说明了我的问题。但我的解决方案不是提供颜色回退——而是明确设置容器的宽度。由于标题图像的设置方式，提供颜色回退不会产生令人满意的结果。

标签： css email html-email windows-live

【解决方案1】：

试着把它放在每个图像标签中：

style="display: block"

你不能有不同的 CSS，因为它们都应该是内联的。您还应该使用表格（我知道，我知道）。如果您可以发布一些来源，我可以提供更多帮助。

【讨论】：

我希望类似于 css hack 的东西（明星 hack 或利用 hotmail 自己的 css 规则在现有规则之上添加规则的东西）

【解决方案2】：

最后我不得不在发送之前根据自定义规则列表修改我的电子邮件（基于域的正则表达式替换）。

【讨论】：

【解决方案3】：

我知道这是个老问题，但它可能对仍在为 web、windows Outlook 和 windows mail 苦苦挣扎的人有用。

我找到了一种专门从 Windows Outlook 和邮件应用程序隐藏元素的方法：

<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

引用这个伟大的blog。

您还可以将所有 Outlook 应用程序（移动、网络、桌面）定位为：

<!--[if mso]> 
    <div> Your content that you want visible </div>            
<![endif]-->

您还可以使用其他条件反转它并针对特定版本，类似：

<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->

更多关于这个link。

至于在桌面/Windows 版本的 Outlook（邮件应用程序和 Outlook ms）中显示背景图像，您可以使用 VML 以及更多相关信息，您可以找到 here.

【讨论】：