Question

将Litmus用于响应式电子邮件对于大多数浏览器都显示了很好的效果，但是电子邮件中的某些对象使用Display:none !important;并且仍然完全显示在Yahoo / Gmail中，部分显示在Outlook 2013中。

更新：提供示例 -

使用如下的样式代码

基本样式

.mobile {display：none;字体大小：0; max-height：0; line-height：0; MSO隐藏：所有;}

@ Media

table [class = mobile] {display：block！important; line-height：1.5％！important; max-height：none！important; font-size：12px！important;}

`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>

`

在大多数浏览器上通过石蕊只会显示一个或另一个，但在Gmail上它显示的是移动设备和浏览器文本

Answer 1

Outlook 2013或googlemail - http://www.campaignmonitor.com/css

不支持

display

然而z-index是。因此，您可以尝试设置否定z-index。我没试过这个，但值得一试。

Answer 2

如果您的问题缺乏任何相关信息，我只能建议您。

阅读并按照此处的信息操作 http://kb.mailchimp.com/article/how-to-code-html-emails/ 特别要注意这一点 99％的CSS无法使用（特别是在Gmail，Yahoo！Mail等基于浏览器的电子邮件服务中）。
避免使用尽可能多的css，像1999年的代码 - 是的使用表格
如果您必须使用css，请使用内联，并且不能使用内联而不是头部。

所以，如果你想隐藏什么？我们不知道的 - 你需要更多的东西才能开始考虑白色背景上的白色文字。

Answer 3

尝试将移动表格包装在此：

<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
    <!-- tables! -->
</div>
<!--<![endif]-->

然后在您的媒体查询中

div[class="mobileonly"] {
    display:block !important;
    overflow : visible !important;
    width:auto !important;
    max-height:inherit !important;
}

Answer 4

我知道这是一个老帖子。

解决方案是使用html表来布局在Outlook上看起来很好用的电子邮件内容。然后包装＆lt; / td＆gt;中的列＆LT; / TD＆GT;因此，td列将在其他电子邮件客户端上被杀死，例如gmail，移动电子邮件等。

通过这种方式，您可以在outlook上创建包含两列的电子邮件，但将列包装在非Outlook上。

HTML响应电子邮件

4 个答案: