【问题标题】:Issues with HTML images in Foundation email not obeying size styles in OutlookFoundation 电子邮件中的 HTML 图像不符合 Outlook 中的大小样式的问题
【发布时间】:2024-01-11 09:56:01
【问题描述】:

我正在使用 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;
    }
}

电子邮件中的所有其他图像都适合,但 socialLinks 类下的图像不保持 35 像素。这仅发生在 Outlook 而不是其他电子邮件客户端。是否有任何解决方案或 Outlook 的解决方法?我知道它以讨厌 HTML 电子邮件而闻名,因此我们不胜感激。

【问题讨论】:

    标签: html css zurb-foundation html-email zurb-ink


    【解决方案1】:

    为将来遇到此问题的任何电子邮件开发人员解决了这个问题。您需要内联而不是通过 css 添加图像的宽度和高度,以便图像看起来像:

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

    而不仅仅是图片源和设置高宽的css

    【讨论】:

    • Outlook 将始终默认为实际图像尺寸。