CSS在Gmail的设计（Rails）邮件程序中不起作用答案

【问题标题】：CSS not working in Devise(Rails) Mailer for GmailCSS在Gmail的设计（Rails）邮件程序中不起作用
【发布时间】：2016-06-16 20:22:06
【问题描述】：

我在用户注册后发送确认电子邮件。我使用设计的邮件视图。似乎其他一切都在工作，但根本没有调用 CONFIRM ACCOUNT 的 CSS。我读到我不能将 CSS 类用于邮件视图，所以我将所有内容都设置为内联样式。当我在我的网络应用程序上查看邮件程序视图时，它看起来很棒，如下所示

但在实际的邮件程序视图中，它看起来像这样：

下面是我的代码：

<body style="background-color: #F7F7F7;">
<div class="main wrapper clearfix">
    <div style="border: 1px solid #e4e4e4;
        border-radius: 5px;
        margin: 50px auto;
        padding: 20px 50px;
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
        background-color: white;
        max-width: 700px;">
        <div style="text-align:center">
            <%= image_tag("logo-green.svg") %>
        </div><br><br>
        <div>
            <p>Welcome <%= @user.first_name %>!</p>

            <p style="line-height: 1.5">Let's confirm your email address. Click the button below to confirm your email.</p>

            <%= link_to 'CONFIRM ACCOUNT',
            confirmation_url(@resource, confirmation_token: @token),
            style: "font-family: Raleway-SemiBold, sans-serif;
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                cursor: pointer;
                text-decoration: none;
                color: white;
                letter-spacing: 1px;
                    padding: 13px 30px;
                    font-size: 0.8em;
                    color: #fff;
                    background-color: #00BA9B;
                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                    transition-delay: 0.2s;
                    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.26);
                    margin-top: 25px;
                    margin-bottom: 20px;
                    border-radius:" %>

            <br><br>
            <p style="line-height: 1.5">Thanks,<br>website <br> <a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a></p>
            <br>

             <p style="color:grey; font-size:11px;">P.S. If you didn't sign up for website, please ignore this email - apologies for the disturbance.<p>
        </div>
    </div>
</div>
</body>

<a href="www.website.com" style="color: #00BA9B; text-decoration:none">www.website.com</a> 的样式在邮件视图中效果很好。但是CONFIRM ACCOUNT 的行样式不起作用。我很想知道为什么内联样式在其他地方有效，但在 link_to 'CONFIRM ACCOUNT', 上无效。

【问题讨论】：

标签： html css ruby-on-rails devise actionmailer

【解决方案1】：

电子邮件客户端 HTML 有很多限制。 This guide shows you what you can and cannot do with email HTML.

所有这些过渡、自定义光标、阴影？那不会飞。

【讨论】：