基金会电子邮件中HTML图像不符合Outlook中大小样式的问题如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (112)

我正在使用Foundation电子邮件创建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;
    }
}

电子邮件中的所有其他图片都是合适的,但是SocialLinks类下的图片不会停留在35 px。这种情况只发生在Outlook上,而不是其他电子邮件客户端上。是否有任何解决方案或解决方案的Outlook?

提问于
用户回答回答于

你需要内联地添加图像的宽度和高度,而不是通过CSS添加图像的宽度和高度,这样图像看起来就像:

<img src="www.image.com" width="35" height="35"/>

而不仅仅是图像源和CSS设置高度和宽度。

扫码关注云+社区

领取腾讯云代金券