Foundation 电子邮件中的 HTML 个图像不符合 Outlook 中的大小样式的问题
Issues with HTML images in Foundation email not obeying size styles in Outlook
我正在使用 Foundation Email 创建 HTML 电子邮件,它运行良好,但页脚图像不符合我设置的 CSS 大小限制。
以下是如何将页脚注入页面:
</a>
</columns>
</row>
{{>footer}}
</container>
这是页脚中的代码:
<row class="background-aqua socialLinks">
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://www.facebook.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/Facebook+Logo.png"/></center>
</a>
</columns>
<columns small="3" large="3">
<spacer size="16"></spacer>
<a href="http://instagram.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/instagram.png"/></center>
</a>
</columns>
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://www.pinterest.com/SPLENDA/">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/pinterest.png"/></center>
</a>
</columns>
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://twitter.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/twitter.png"/></center>
</a>
</columns>
</row>
这是关于页脚的CSS:
.socialLinks{
max-width: 700px;
a{
max-height: 35px;
max-width: 35px;
}
img{
padding:20px 0px;
width:35px;
height:35px;
max-height: 35px;
max-width: 35px;
}
}
.footer{
img{
padding: 45px 0 15px 0;
max-width:148px;
height: auto;
}
p{
color:white;
font-size: 12px;
line-height: 16px;
margin: 0;
}
.footerLink{
text-decoration: underline;
font-weight: bold;
color:white;
}
}
电子邮件中的所有其他图片都适合,但社交链接 class 下的图片不会保持 35 像素。这只发生在 Outlook 上,不会发生在其他电子邮件客户端上。对此有任何解决方案或 Outlook 的解决方法吗?我知道它以讨厌 HTML 电子邮件而闻名,因此我们将不胜感激。
为以后 运行 遇到此问题的任何电子邮件开发人员解决这个问题。您需要内联添加图像的宽度和高度,而不是通过 css,因此图像看起来像:
<img src="www.image.com" width="35" height="35"/>
而不只是图像源和 css 设置高度和宽度
我正在使用 Foundation Email 创建 HTML 电子邮件,它运行良好,但页脚图像不符合我设置的 CSS 大小限制。 以下是如何将页脚注入页面:
</a>
</columns>
</row>
{{>footer}}
</container>
这是页脚中的代码:
<row class="background-aqua socialLinks">
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://www.facebook.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/Facebook+Logo.png"/></center>
</a>
</columns>
<columns small="3" large="3">
<spacer size="16"></spacer>
<a href="http://instagram.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/instagram.png"/></center>
</a>
</columns>
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://www.pinterest.com/SPLENDA/">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/pinterest.png"/></center>
</a>
</columns>
<columns small="3" large="3" >
<spacer size="16"></spacer>
<a href="http://twitter.com/splenda">
<center><img src="http://image.splenda-email.com/lib/fe8f137276650c7e7d/m/1/twitter.png"/></center>
</a>
</columns>
</row>
这是关于页脚的CSS:
.socialLinks{
max-width: 700px;
a{
max-height: 35px;
max-width: 35px;
}
img{
padding:20px 0px;
width:35px;
height:35px;
max-height: 35px;
max-width: 35px;
}
}
.footer{
img{
padding: 45px 0 15px 0;
max-width:148px;
height: auto;
}
p{
color:white;
font-size: 12px;
line-height: 16px;
margin: 0;
}
.footerLink{
text-decoration: underline;
font-weight: bold;
color:white;
}
}
电子邮件中的所有其他图片都适合,但社交链接 class 下的图片不会保持 35 像素。这只发生在 Outlook 上,不会发生在其他电子邮件客户端上。对此有任何解决方案或 Outlook 的解决方法吗?我知道它以讨厌 HTML 电子邮件而闻名,因此我们将不胜感激。
为以后 运行 遇到此问题的任何电子邮件开发人员解决这个问题。您需要内联添加图像的宽度和高度,而不是通过 css,因此图像看起来像:
<img src="www.image.com" width="35" height="35"/>
而不只是图像源和 css 设置高度和宽度