2

设置： 我正在尝试使用响应式设计的电子邮件。让我提前说，我有足够的经验，我希望会有我无法控制的电子邮件客户端。但是，我现在遇到的麻烦是Outlook 2011 (for Mac)。

我在 main 上使用内联 CSS<table>来建立最小和最大宽度，然后将我的标题图像设置为 100% 宽度。这在 Outlook 中显然会失败（创建一个巨大的图像），所以我使用条件注释来给 Outlook 客户端一个<table>大约具有固定宽度的第一个。

例子： <!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0px 0px 0px 0px; width:600px; border:0px; background-color:#000000;"><tr><td><![endif]-->

<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px 0px 0px 0px; max-width:600px; min-width:150px; width:100%; background-color:#FFFFFF; border:0px;">

问题： 我无法让 Outlook 2011（Mac 版）识别任何条件注释。此外，它不会处理最大和最小宽度样式。<!--[if !(WindowsEdition)>我尝试测试 mso 和mso版本的 IE，甚至是非 Windows 机器（

有没有人有办法测试这个版本的 Outlook？

4

3 回答 3

0

@astangelo，

我刚刚为我的雇主设计了一个新的响应式电子邮件模板，并且遇到了与 Outlook for Mac 完全相同的问题。

谷歌搜索了一下后，我发现很奇怪（而且是一个非常好的消息），Mac 版 Outlook 2011 使用的是 Webkit 渲染引擎，而不是 Microsoft Word。

因此，您不能使用通常用于其他基于 PC 版本的 Outlook 的条件注释来定位它。

您需要做的就是在您的头部样式中添加一个@media 查询，并使用（最好）一个 table["attribute"="property"] 选择器指定一个最大宽度。

我只是这样做并对其进行了测试，它最终解决了我的问题。

确保您使用 Premailer 的 CSS 内联工具，并“检查”“不要从头部删除或从头部删除”，否则您的 @media 查询将无法通过，并且该技巧将不起作用。

我希望这有帮助！

真诚的，罗伯特

于 2014-01-14T19:14:36.390 回答
0

这有点像在黑暗中拍摄，但值得一试，因为我有 99% 的把握它会起作用。Outlook 2011 for Mac 使用 webkit 呈现电子邮件。所以通过使用定位 webkit

@media screen and (-webkit-min-device-pixel-ratio:0) {  

body {  }  
}

应该管用。

执行此操作后，请小心检查所有以前工作的电子邮件客户端，因为您也可能针对这些客户端。

让我知道！

于 2013-06-12T17:45:56.497 回答
0

据我所知，2011 年没有条件评论，我尝试了一些事情，但没有任何乐趣。

但是，如果您在 html 元素中设置图像的高度和宽度，它不会显得很大。然后在媒体查询中将其设置为 100%。 

<style>
@media screen and (max-width: 600px) {  
  .headerimage{
    width:100%;!important;  
    height:auto;!important;
  }
}
</style>

<img src="xxx" height="100" width="600" class="headerimage">
于 2013-10-25T09:17:17.240 回答