我正在尝试使用具有某些 CSS 样式的 thymeleaf 模板通过 spring mail 发送电子邮件。
这是我的电子邮件 thymeleaf 模板
<!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>
我的 thymeleaf 配置是
@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;
}
邮件发送成功，但没有出现 css 样式。没有应用于邮件的 css 样式。有人可以帮我解决这个问题吗？
最佳答案
为电子邮件使用表格并应用内联样式(您不是在创建网页!)，您还应该阅读电子邮件模板中可接受的 CSS 使用。
margin、float、max-width 等参数不起作用。
关于html - CSS 样式不适用于 Thymeleaf 的电子邮件模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33102885/