CSS样式不适用于Thymeleaf的电子邮件模板

Question

I am trying to send email over spring mail using thymeleaf template with some css styles. 我正在尝试使用带有某些CSS样式的百里香模板通过Spring邮件发送电子邮件。

Here are my email thymeleaf template 这是我的电子邮件百里香模板

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{email.invitationToJoinNetwork.title}">Network Invitation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
    body {
        background-color: #f2f2f2;
    }
    .mail {
        text-align: center;
        font-family: "Open Sans";
        color: #707070;
        margin: 0 auto;
        max-width: 500px;
        _width: 500px;
    }
    .mail-header {
        padding-top: 30px;

    }
    .mail-header h2 {
        font-weight: 100;
        font-size: 40px;
    }
    .mail-body {
        height: 200px;
        padding: 30px 20px 50px;
        border-radius: 2px;
        background: #fcfcfc;
    }
    .mail-body .mail-message {
        height: 100px;
        border-bottom: 2px solid #f2f2f2;
    }
    .mail-footer {
        display: flex;
        margin: 20px auto;
    }
    .mail-footer .half-size {
        width: 50%;
    }
    .image-link {
        height: 80px;
        width: 160px;
    }
    .app {
        margin-top: 15px;
    }
</style>

</head>
    <body>
        <div class="mail mail-header">
            <h2><span th:text="${user.firstName}">User</span> wants you to join network </h2>
    </div>
    <div class="mail mail-body">
        <div class="mail-message">
            <b><span th:text="${user.firstName}">User</span> invited you to network "<span th:text="${network.name}">name</span>".</b><br/>
            To be part of the network, you must accept the invitation in the app.
        </div>
        <div class="mail mail-footer">
            <div class="half-size">
                Get the app for iphone
                <div class="app">
                    <img class="image-link" src="../assets/appstore-iphone.png" />
                </div>
            </div>
            <div class="half-size">
                Get the app for android
                <div class="app">
                    <img class="image-link" src="../assets/appstore-android.png" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

My thymeleaf config is 我的百里香叶配置是

@Bean
    @Description("Thymeleaf template resolver serving HTML 5 emails")
    public ClassLoaderTemplateResolver emailTemplateResolver() {
        ClassLoaderTemplateResolver emailTemplateResolver = new ClassLoaderTemplateResolver();
        emailTemplateResolver.setPrefix("mails/");
        emailTemplateResolver.setSuffix(".html");
        emailTemplateResolver.setTemplateMode("HTML5");
        emailTemplateResolver.setCharacterEncoding(CharEncoding.UTF_8);
        emailTemplateResolver.setOrder(1);
        return emailTemplateResolver;
    }

Emails are sending successfully but no css style are appears. 电子邮件发送成功，但是没有CSS样式出现。 No css styles applied to the mail. 没有CSS样式应用于邮件。 Can someone help me to resolve this ? 有人可以帮我解决这个问题吗？

Answer 1

Use tables for emails and apply the styles inline (you're not creating a web page!), you should also read about acceptable CSS use in email templates. 使用电子邮件表并内联应用样式（您不是在创建网页！），还应该阅读有关电子邮件模板中可接受的CSS用法的信息。

Things like margin , float , max-width do not work. 像margin ， float ， max-width之类的东西不起作用。

https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/

CSS样式不适用于Thymeleaf的电子邮件模板

问题描述

1 个解决方案

解决方案1
4 2015-10-13 12:51:43

CSS样式不适用于Thymeleaf的电子邮件模板

问题描述

1 个解决方案

解决方案1 4 2015-10-13 12:51:43

解决方案1
4 2015-10-13 12:51:43