用Amazon发送的Rails邮件在Mac邮件中格式错误

Question

我有一个Rails网络应用部署在一个亚马逊EC2实例中，它使用带有标题和徽标的html电子邮件模板和SES电子邮件服务发送通知电子邮件。

电子邮件的发送和正确，他们是完美地显示在所有邮件客户端(即gmail，hotmail)，甚至我的手机，但在Mac邮件，那里的标志没有正确显示。

请看随附的截图。

​

​

更新：I正在使用Chrome和Gmail帐户进行测试。如果我打开完全相同的电子邮件在两个(Mac邮件和Chrome)，我可以看到它正确的Chrome，然而，我认为它错在邮件。我已经检查了徽标大小是不尊重从CSS在邮件。

请看Chrome中Gmail的截图。我在手机上也看到了。

​

我附加Rails代码以生成电子邮件：

In email_service.rb:

  # booking request admin
  def send_booking_request_admin_notification(customer, provider, boat, booking)
    @customer = customer
    @provider = provider
    @boat = boat
    @booking = booking
    attachments.inline['logo.png'] = File.open("#{Rails.root.to_s + '/app/assets/images/logo.png'}", "rb") {|io| io.read}   
    mail(from: APP_CONFIG['YANPY_EMAIL_FROM'], to: APP_CONFIG['YANPY_EMAIL_FROM'], subject: t('booking_request_Yanpy_subject', user_email: customer.email , owner_email: provider.email, booking_code: booking.code))
  end

send_booking_request_admin_notification.erb:中的

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/yanpy.dev/css/emails.css">
  </head>
  <body>
    <div id="nav-bar">
        <%= image_tag attachments['logo.png'].url, alt: 'Yanpy', size: '87x30', :class => "logo" %>
    </div>
    <div id="mail-content">
        <h4><%= t('admin_hello') %></h4>
        <p><%= t('booking_request_Yanpy_content_1', user_email: @customer.email, boat_name: @boat.name , owner_email: @provider.email, booking_code: @booking.code) %></p>
        <p><%= t('admin_goodbye_1') %></p>
        <p><%= t('admin_goodbye_2') %></p>
    </div>
  </body>
</html>

我试图通过调整浏览器Chrome窗口的高度和宽度来重现这个问题，但我做不到。

更新2:我在Chrome中附加了来自Gmail的相关HTML代码(工作)：

<div style="background:#f8f8f8;margin:0px;padding:0px" bgcolor="#f8f8f8">

    <div style="background:#1b1b1b linear-gradient(to bottom,#222,#111);border:#252525;min-height:50px;width:100%">
        <img alt="Yanpy" height="30" src="?ui=2&amp;ik=836c81b94f&amp;view=fimg&amp;th=149e8a5ae9582fb1&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ8q_xSPAswkC2fDqsoAHPR0qKIUHUDjW45HorJli1u9zmcocdWFYXYi2rysx9cYcvsx7KJScrWLqDHBAOP-5W5g7LynDaj0cnMtQyS_P7D3A8ihhvpRKBLttmw&amp;sz=w174-h60&amp;ats=1416947426145&amp;rm=149e8a5ae9582fb1&amp;zw&amp;atsh=1" width="87" style="margin-left:20px;margin-top:10px" class="CToWUd">
</div>

现在，从Mail不工作(注意:我不知道这是否是真正的代码，我不知道如何从邮件得到它。)我刚把邮件转发到Hotmail帐户，并从那里得到)：

<div style="background-color:rgb(248, 248, 248);padding:0px;font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;"><div style="background-color:rgb(27, 27, 27);border:rgb(37, 37, 37);height:50px;width:727px;background-position:initial initial;">

<img id="ecx52214002-0011-49E6-B577-6C08A8DA9C9E" height="121" width="352" src="https://dub126.afx.ms/att/GetInline.aspx?messageid=5293f1b7-74df-11e4-9417-00237de45652&amp;attindex=0&amp;cp=-1&amp;attdepth=0&amp;imgsrc=cid%3a32FDE1B1-DA1A-4A66-B63C-BBB067B5AB81%40Home&amp;cid=ed5bb1624ed90a36&amp;shared=1&amp;hm__login=roberto.chingon&amp;hm__domain=hotmail.com&amp;ip=10.148.132.8&amp;d=d3103&amp;mf=0&amp;hm__ts=Wed%2c%2026%20Nov%202014%2008%3a11%3a10%20GMT&amp;st=roberto.chingon&amp;hm__ha=01_745f8f086a98f87d549a0721ddd5738b4bfecce8795f549762672eea9f5cf5ba&amp;oneredir=1"></div><div style="padding:20px;"><h4>Hola Admin,</h4><p>El usuario prueba se ha registrado con el email<span class="ecxApple-converted-space">&nbsp;</span><a href="mailto:propietario.yanpy3@gmail.com">propietario.yanpy3@gmail.com</a><span class="ecxApple-converted-space">&nbsp;</span>correctamente.</p><p>Un saludo,</p><p>El equipo de Yanpy.</p></div></div>

Answer 1

我修好了。与电子邮件工作，你必须开发像一个旧的学校HTML，我的意思是，你不能链接到外部CSS文件。相反，您应该直接在HTML模板中添加css属性。如果它是标记的样式属性中的内联css，则更好。

Answer 2

Apple使用类似于Outlook的WebKit呈现引擎，您应该尝试用Chrome和Safari等WebKit浏览器来测试它。