如何为Outlook webmail应用条件内容
提问于 2020-01-07 21:32:43
所以我创建了一个交互式的html电子邮件，但是由于某种原因，outlook.com忽略了有条件的内容。当我将有条件的内容添加到电子邮件中时，电子邮件在apple mail中中断。基本上，电子邮件应该是淡入和下雪，它工作得很好，而另一个outlook只呈现常规的电子邮件fin，但outlook.com不会加载淡入内容，如果你添加条件，它也不会在苹果邮件中淡入。这就是我尝试过的
[class=".x_showlater"]{opacity:1;}但这会导致apple mail将不透明度设置为1，以便稍后显示，而outlook.com仍然不会将不透明度显示为1。
<!--[if mso]> <![endif]-->设置不透明度:1！重要；但它在苹果邮件中也会这样做。我还试图用<!--[if !mso]> <!----> <!-- <![endif]-->包装整个交互部分，但outlook.com仍然可以读取代码。
<style>
@media screen and (-webkit-min-device-pixel-ratio:0),
(-ms-high-contrast: none), (-ms-high-contrast: active){
.ball-shadow{
animation: shadow 2s forwards;
display:block!important;
max-height:none!important;
position:relative;
}
.ball{
z-index:100;
animation: drop 2s forwards;
position:relative;
}
[class=".x_showlater"]{
opacity:1;}
.showlater,.showlater2{
opacity:0;
animation: showlater 0.5s 2s forwards;
}
.showlater2{
animation-delay: 5.2s;
}
}
@keyframes drop{
0%{
opacity:0;
}
25%{
opacity:0;
transform:translateY(-30px);
}
80%{
opacity:0.9;
}
100%{
opacity:1;
transform:translateY(30px);
}
}
@keyframes shadow{
0%{
opacity:0;
}
40%{
opacity:0;
transform: scale(0.8);
}
100%{ opacity:1;
transform: scale(1);
}
}
@keyframes showlater{
from{opacity:0;}
to{opacity:1;}
}
</style>
<style>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.snowcontainer{
position:relative;
width:100%;
overflow:visible;
}
.fallingSnow {
text-align: center;
}
.fallingSnow span {
display: inline-block;
width: 20px;
height: 21px;
margin: -280px 60px 54px -34px;
background:url("https://i.imgur.com/kMATQ2d.png");
-webkit-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
-moz-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29);
}
.fallingSnow span:nth-child(5n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.fallingSnow span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.fallingSnow span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}
.fallingSnow span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.fallingSnow span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.fallingSnow span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.fallingSnow span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes fallingSnow {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
@-moz-keyframes fallingSnow {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
</style><div class="containerSnow" style="height: 100%;">
<div class="fallingSnow showlater">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<table class="gmail-fix" width="100%" bgcolor=”#FFFFFF” style=" min-width:320px;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<table class="w-100p" width="650" align="center" style="max-width:650px; margin:0 auto;" cellpadding="0" cellspacing="0">
<!-- header -->
<tbody><tr>
<td class="p-15 showlater" style="padding:9px 38px 26px; border-bottom:3px solid #00aeef;">
<a style="text-decoration:none;" href="#">
<img src="#" width="230" style="width:230px; font:14px/18px Arial, Helvetica, sans-serif; color:#00acee; vertical-align:top;" alt="Circle">
</a>
</td>
</tr>
<!-- content -->
<!-- block -->
<tr>
<td class="ptb-30" class="container" style="padding:41px 15px 52px;">
<table class="w-100p" width="560" align="center" style="max-width:560px; margin:0 auto;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="padding:0 0 30px; font:16px/24px Helvetica, Arial, sans-serif; color:#000;"><center>
<table>
<tbody>
<tr>
<td>
<div><a href="#"><img border="0" img="" style="display: block; margin: 0 auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div>
<div class="ball-shadow">
<a href="#"><img border="0" img="" style="display: block; margin: 0 auto; height: auto; width: 554px; max-width: 100%;" src="#" alt="alt"></a></div>
<!--[if gte mso 9]>
<br />
<![endif]-->
<br>
<div class="ball-shadow">
<center><a href="#"><img border="0" width="362" img="" style="display: block; margin: 0 auto; height: auto; width: 100%; max-width: 362px;" src="#" alt="alt"></a></center></div>
</td>
</tr>
</tbody>
</table>
</center>
<div class="showlater">
<br>
Hi,
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut eros non massa malesuada cursus quis et purus. Proin eget dui efficitur, accumsan purus in, condimentum sapien. Aenean nec maximus tortor. Proin massa urna, euismod sit amet risus a, condimentum pellentesque ex. Mauris tincidunt turpis vel ex egestas egestas. Nunc maximus venenatis volutpat. Integer ultricies malesuada metus ut varius. Phasellus in dui tortor. In molestie sodales massa nec lobortis. Sed mattis ex non nunc consectetur, et porta dolor fringilla. Nam orci magna, lacinia vitae efficitur vel, facilisis ut sem. Vestibulum dictum ullamcorper urna sit amet blandit. Etiam at sollicitudin leo. In et orci nec sapien semper sagittis. Nulla facilisi. Etiam nec sem tincidunt, finibus quam nec, egestas neque.
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-09 20:02:23
所以，我终于想通了。
[class~="x_showlaterout"], [class~="x_showlater2out"]{ /* work around for outlook.com */
opacity:1 !important;
}您需要创建类似于此[class~="x_classname"]{outlook.com specific code }的类样式，因为outlook.com会自动将任何类更改为包含x_。这样做之后，您可以将类添加到您想要影响的元素中，但不带x_。因此，在本例中，它将是showlaterout和showlater2out。这将使您获得想要的效果，但是当用户在outlook.com上打开它时，它会将类更改为x_showlater2out和x_showlaterout，这将应用您创建的样式，因为这些类现在匹配
Stack Overflow用户
发布于 2020-01-08 19:48:10
opacity可以在Outlook.com上运行，但不能在大多数版本的Outlook上运行。
https://www.campaignmonitor.com/css/positioning-display/opacity/
z-index在大多数版本的Outlook和大多数电子邮件客户端中都不起作用。
https://www.campaignmonitor.com/css/positioning-display/z-index/
animation不适用于大多数电子邮件客户端。
https://www.campaignmonitor.com/css/animations/animation/
如果事情真的对你有用，那就太好了。如果你想接触到更多的Outlook用户，我可能会建议你寻找替代方案。
祝好运。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59636364
复制
![[每日一题]山？水！](https://ask.qcloudimg.com/http-save/yehe-1659905/06ing8kd7q.jpeg)
腾讯云开发者
