我在使用带有Zurb Ink 电子邮件框架的桌面/移动显示/隐藏功能时遇到问题。当我使用下面的 CSS 时,它在 GMail 中正常工作,其中隐藏了移动内容,只显示桌面,但在 Outlook 中不显示。但是,使用默认的 Ink CSS(在 上没有!important
标志display: none
)它在 Outlook 中有效,但在 GMail中无效。我正在使用 Outlook 2010。
我从这个 Gist中获得了一些灵感,我正在使用这个 CSS:
div.gmail .show-for-small,
div.gmail .hide-for-desktop {
display : none !important;
mso-hide: all !important;
}
这是我的电子邮件标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
<!-- my inline styles in here -->
</style>
</head>
<body>
<!--[if !mso]><!-->
<div class="gmail">
<!--<![endif]-->
<table class="body">...</table>
<!--[if !mso]><!-->
</div>
<!--<![endif]-->
</body>
我错过了什么?
Zurb 有一个断点,位于 600px,所以我不想更改它。Zurb 提供的 Ink CSS 可以在这里看到。