1

HTML 电子邮件变化无常。我的问题在于上标。

我的代码需要在某些桌面客户端中工作：

  • 展望 2000
  • 展望 2003
  • 展望 2007
  • 展望 2010

以及在某些基于 Web 的电子邮件客户端（Firefox、Chrome、Explorer）中：

  • 邮箱
  • 雅虎
  • 美国在线
  • Internet Explorer 7 浏览器（笑）

目前我遇到的最好的跨浏览器代码是：

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

这在除 Outlook 2007 和 2010 之外的所有内容中都非常有效，其中字体大小缩小到几乎无法辨认。其他代码如：

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

这段代码在所有方面都很好用，除了 Gmail 去掉了导致上标位于基线上的位置。

在尝试了几十种不同的样式组合之后，以上 2 种是提供最一致的字体大小和行高的组合。

问题

我可以在头部放置一些代码片段来告诉电子邮件使用特定代码或类，具体取决于打开电子邮件的客户端？我知道 Gmail 更喜欢内联样式而不是类，所以也许我可以应用 Gmail 漂亮的内联代码，但如果它是在 Gmail 之外打开的，那么某些东西会取消内联样式并退回到类上。

4

4 回答 4

1

使用 mso 标签或 style 标签的组合。

mso 标签将仅针对 Outlook 或特定版本的 Outlook，而 Gmail 不会呈现样式标签中的任何内容。

我会为gmail设置内联样式，然后在样式标记中使用!important来覆盖内联声明。如果您想在样式标记中为其余不是 Outlook 的电子邮件客户端声明多个样式，请使用 mso 条件标记。

于 2013-07-31T18:47:26.833 回答
1

您可以使用条件注释专门针对 Outlook：

<!--[if gte mso 9]>
    /* Your Outlook-specific CSS goes here. */
<![endif]-->
于 2013-07-31T15:09:19.387 回答
0

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

我拿了我的原件<sup>并用<span>

因此，在没有任何变化的情况下在所有内容中创建<sup>-esque 外观，您应该将以下内容用于上标：

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

这在所有上述客户端中进行了测试，一切看起来都一样。

于 2013-08-01T21:30:44.747 回答
0

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

于 2013-07-31T15:10:42.150 回答