根据哪个客户端打开它来呈现HTML电子邮件

时间:2013-07-31 14:49:47

标签: html css html-email

HTML电子邮件是一堆善变的。我的问题在于上标。

我的代码需要在某些桌面客户端中运行:

  • Outlook 2000
  • Outlook 2003
  • Outlook 2007
  • Outlook 2010

与某些基于网络的电子邮件客户端(Firefox,Chrome,资源管理器)一样:

  • 的Gmail
  • 雅虎
  • AOL
  • Internet Explorer 7浏览器(lol)

目前我遇到的最佳跨浏览器代码是:

<sup style="font-size:11px; line-height:0; vertical-align:3px;">

除了Outlook 2007和2010之外,其他所有功能都非常出色,其中font-size缩小到几乎不可读。其他代码如:

<sup style="position:relative; vertical-align:baseline; bottom:4px;">

此代码适用于所有内容,但Gmail除去了导致上标位于基线上的定位。

在尝试了几十种不同的样式组合之后,上面的两种组合提供了最一致的字体大小和线条高度。

问题

是否有一些代码片段可以放在头脑中告诉电子邮件使用某个代码或类,具体取决于打开电子邮件的客户端?我知道Gmail更喜欢内联样式的内联样式,所以也许我可以内联地应用Gmail漂亮的代码,但是如果它在Gmail之外打开,有些东西会取消内联样式并回到课堂上。

4 个答案:

答案 0 :(得分:1)

You can target Outlook specifically with conditional comments

<!--[if gte mso 9]>
    /* Your Outlook-specific CSS goes here. */
<![endif]-->

答案 1 :(得分:1)

使用mso标签或样式标签的组合。

mso Tags仅定位Outlook或特定版本的Outlook,而Gmail不会从样式标记中呈现任何内容。

我会将其设置为内联格式,然后在样式标记中使用!important来覆盖内联声明。如果要在样式标记中为非Outlook的其他电子邮件客户端声明多个样式,请使用mso条件标记。

答案 2 :(得分:0)

我强烈建议在这种情况下使用像premailer这样的实用程序。它将自动内联css类,并执行有助于解决跨客户端问题的其他优化。如果你经常做这类事情,甚至还有一个api来自动化这个过程。

答案 3 :(得分:0)

我能够在不使用条件语句的情况下解决我的问题,我觉得值得分享以防其他人处理同样的问题。

我使用原始<sup>并将其与<span>

交换

因此,在没有任何变化的情况下创建<sup> - esque外观,您应该使用以下内容作为上标:

<span style="font-size:85%; line-height:0; vertical-align:3px;"></span>

这在所有上述客户中都经过测试,一切看起来都相同。