Question

尝试使用nodemailer发送模板电子邮件并使用车把制作模板。

电子邮件确实发送了，但是电子邮件的样式不正确。看起来像这样

我已附上我在车把模板中写的内容

<!DOCTYPE html>
<html>
    <head>
    <title>Welcome to</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Cabin');
        body { margin: 0; padding: 0; left: 0; top: 0; background-color: white; }
        h1 { font-family: 'Cabin'; font-weight: 600; color: rgba(5,45,84,1); margin-left: 2px;}
        p { font-family: 'Cabin'; font-weight: 400; font-size: 11pt; color: rgba(5,45,84,1); margin-left: 2px; }
        h3 {
            margin-top: 50px;
            color: rgba(5,45,84,.25);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
            width: 80vw;
        }
        h2 {
            text-align: center;
            margin-top: 25px;
            margin-bottom: 10px;
            color: rgba(5,45,84,1);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
        }
        h3 > a { color: rgba(118,146,255,1); }
        h3 > a:hover { cursor: pointer; }
        h3 > a:active { opacity: .75; }
        .page-container { width: 80vw; margin-left: 10vw; }
        .logo { margin-left: 2px; height: 30px; margin-top: 20px; margin-bottom: 20px; }
        .divider { height: 1px; width: 100%; background-color: rgba(5,45,84,.1); margin-bottom: 40px; }
        .button-container {
            width: 100%;
            height: 50px;
            margin-top: 25px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
        }
        .cta {
            transition: all 200ms; 
            -webkit-transition: all 200ms; 
            -moz-transition: all 200ms; 
            -o-transition: all 200ms;
            -ms-transition: all 200ms;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 46px;
            color: white;
            font-size: 11pt;
            font-family: 'Cabin';
            font-weight: 500;
            padding-left: 20px;
            padding-right: 20px;
            background-color: #7692FF;
            border-radius: 5px;
            margin-top: 0px;
            margin-bottom: 4px;
            box-shadow: 0px 4px rgba(118,146,255,.25);
        }
        .cta:hover {
            cursor: pointer;
        }
        .cta:active {
            margin-top: 4px;
            margin-bottom: 0px;
            box-shadow: 0px 0px rgba(118,146,255,.25);
        }
        .footer-container {
            width: 100%;
            margin-top: 50px;
            padding-bottom: 10px;
            background-color: rgba(5,45,84,.04);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    </head>
    <body>
        <div class="page-container">
        <div class="divider"></div>
        <h1>Welcome to</h1>
        <p>
            Hi Matthew, thanks for signing up for. We're so happy to have you! almost ready to join your first group. Click the link below to verify your email.
        </p>
        <div class="button-container">
            <div class="cta">
            GET STARTED
            </div>
        </div>
        <p>
            We'll reach out again when we're ready for you to start using. Just reply to this email if you have any questions.
        </p>
        <p>
            - Team Something
        </p>
        </div>
        <div class="footer-container">
        <h3 class="footer">
            If you need help, respond to this message. If this message was sent to you by mistake and you did not sign up for an account with us, we apologize.
        </h3>
        <h2>a9 Something 2018</h2>
        </div>
    </body>
</html>

在我看来，某些样式不适用，从Google导入的字体，按钮上的单词居中和框阴影。 flex可以和车把一起使用吗？

Answer 1

电子邮件客户端因显示问题而臭名昭著。始终建议使用嵌套表和一些基本元素，但大多数情况下使用表。

使用内联样式，并使其尽可能基本。大多数HTML5都不会得到完全支持。

使用nodemailer发送模板电子邮件，样式已损坏

1 个答案: