Question

所以我试图在rails中发送带内联css的电子邮件。

邮件看起来就是这样。当使用电子邮件测试服务putsmail时，邮件正在获取样式。

这是我的代码

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=0">
      <title>Shijokes</title>
  </head>
  <body style="z-index:-1;margin:0;background: #f2f2f2;font-family: 'roboto slab','sans serif';overflow-x:hidden;width: 600px;
    margin: 0 auto;">
      <table style="width:100%;background:white;padding: 20px 0;border-bottom:1px solid #ccc;margin-bottom: 30px;">
         <tr display:inline;>
            <td style="width: 25px;"><img style="margin-right: 3px;margin-left: 10px;" src="gift.png"/></td>
        <td style="width: 25px;padding-top:3px;"><img src="wishlist.png"/></td>
        <td style="width: 25px;padding-top:4px;"><img src="smily.png"/></td>
            <td style="width:100%;"><center><img style="width:125px;height:auto;"src="logo.png"/></center></td>
            <td style="text-align:right;padding-right: 14px;">#giftalaugh</td>
         </tr>
      </table>
      <h3 style="text-align: center">Thank you for shopping with us</h3>
      <p style="text-align: center">You've just made a ocassion someone you love(may be even you)<p>
      <p style="text-align: center">You've successfully submitted your order<p>
      <p style="text-align: center; padding-bottom: 30px; ">You're order details are shown below in preference<p>
      <p style="text-align: center">Order Information<p>
      <table style="width:95%;border: 1px solid #ccc;margin: 0 auto;background: white;padding: 2% 0">
           <tr style="text-align:center;">
               <td>Order ID: <%= @order_id %></td>
           </tr>
           <tr style="text-align: center">
               <td><%= @time %></td>
           </tr>
      </table>
      <table style="width:95%; margin: 0 auto;border:1px solid #ccc;border-top:none;border-bottom:none;background: white">
        <tr>
            <th style="text-align:left;padding:2% 0 2% 5%">Artwork</th>
            <th style="text-align:left;padding:2% 0 2% 0">Payment Mode</th>
            <th style="text-align:right;padding:2% 5% 2% 0">Payment Amount</th>
        </tr>
        <tr>
            <td style="text-align:left;padding-left: 5%">Style : <%= @style %></td>
            <td style="text-align:left"><%= @payment_mode %></td>
            <td style="text-align:right;padding-right: 5%">Base Price :  3500</td>
        </tr>
        <tr>
            <td style="text-align:left;padding-left: 5%">Size : <%= @size %></td>
            <td style="text-align:left"></td>
            <td style="text-align:right;padding-right: 5%">Extra People : </td>
        </tr>
        <tr>
            <td style="text-align:left;padding-left: 5%">Number of people : <%= @people %></td>
            <td style="text-align:left"></td>
            <td style="text-align:right;padding-right: 5%">Package : </td>
        </tr>
        <tr>
            <td style="text-align:left;padding-left: 5%">Package : <%= @package %></td>
            <td style="text-align:left"></td>
            <td style="text-align:right;padding: 3% 5% 0 0;color: rgba(0, 128, 0, 0.59);">Total : <%= @total %></td>
        </tr>
      </table>
      <table style="width:95%; border:1px solid #ccc;margin: 0 auto;margin-bottom: 50px;background: white;padding: 0 0 3% 0">
           <tr>
               <th style="text-align:left;padding:2% 0 2% 5%">Shipping Address</th>
               <th style="text-align:left;padding:2% 0 2% 0">Contact Details</th>
           </tr>
           <tr>
               <td style="text-align:left;padding-left: 5%"><%= @name %></td>
               <td style="text-align:left">Mobile: <%= @mobile %></td>
           </tr>
            <tr>
               <td style="text-align:left;padding-left: 5%"><%= @address %></td>
               <td style="text-align:left">email: <%= @email %></td>
           </tr>
            <tr>
               <td style="text-align:left;padding-left: 5%"></td>
               <td style="text-align:center"></td>
           </tr>
           <tr>
               <td style="text-align:left;padding-left: 5%"><%= @city %>-<%= @pincode %></td>
               <td style="text-align:center"></td>
           </tr>
      </table>
        <table style="width:100%;background: white;border-top:1px solid #ccc">
            <tr style="text-align:center">
                <th style="padding:3% 0 0 0">Be Social</th>
            </tr>
            <tr style="text-align:center;">
                <td style="padding-bottom: 1%">Stay up-to-date on exclusive offers,new products and more</td>
            </tr>
            <tr style="text-align: center">
                <td><i style="padding:0 10px;color:grey" class="fa fa-facebook"></i><i  style="padding:0 10px;color:grey" class="fa fa-twitter"></i><i style="padding:0 10px;color:grey" class="fa fa-instagram"></i><i  style="padding:0 10px;color:grey" class="fa fa-pinterest-p"></i></td> 
            </tr>     
            <tr style="text-align:center">
                <td><a href="#" style="color: #45A9FE;text-decoration:none;">www.shijokes.com</a></td>
            </tr>
        </table>

  </body>    
  </html>

上面的html只有inline-css。我不明白为什么css样式没有加载到gmail中。在配置中我需要做什么吗？

CSS样式未在rails mailers中应用

0 个答案: