HTML 基于电子邮件不显示在 Hotmail 和 Gmail 中

HTML based Email do not show in Hotmail & Gmail

我有一个简单的电子邮件，其 body 在 HTML 中。

这是简单的 HTML:

<html>
  <head>
    <meta charset="utf-8">
    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .ticket_holder {
      width:800px;
      height:480px;
      background-image:url(http://www.domain.com/img/sorteos/billete_sorteo_24-07-2015.jpg);
      float:left;
      margin:10px auto;
      position:relative;
      }
      .ticket_number {
      width:277px;
      height:60px;
      text-align:center;
      position:absolute;
      top:290px;
      left:450px;
      font-size:42px;
      color:#11AA00;
      font-family: Titillium Web, sans-serif;
      font-weight:bold;
      }
    </style>
  </head>
  <body>
    <div class="ticket_holder">
      <div class="ticket_number">0236</div>
    </div>
  </body>
</html>

现在，我将显示从 Gmail 帐户收到的电子邮件的内容。我认为一定存在与 header 有关的问题，但不知道应该是什么。

Delivered-To: fran@gmail.com
Received: by 10.37.71.193 with SMTP id u184csp169517yba;
        Fri, 10 Jul 2015 12:10:37 -0700 (PDT)
X-Received: by 10.129.105.213 with SMTP id e204mr24861296ywc.97.1436555437024;
        Fri, 10 Jul 2015 12:10:37 -0700 (PDT)
Return-Path: <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>
Received: from mail136-7.atl41.mandrillapp.com (mail136-7.atl41.mandrillapp.com. [198.2.136.7])
        by mx.google.com with ESMTPS id k7si6464663ykd.6.2015.07.10.12.10.36
        for <apalabrados.co@gmail.com>
        (version=TLSv1.2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128);
        Fri, 10 Jul 2015 12:10:36 -0700 (PDT)
Received-SPF: pass (google.com: domain of bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com designates 198.2.136.7 as permitted sender) client-ip=198.2.136.7;
Authentication-Results: mx.google.com;
       spf=pass (google.com: domain of bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com designates 198.2.136.7 as permitted sender) smtp.mail=bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com;
       dkim=pass header.i=@mail136-7.atl41.mandrillapp.com;
       dkim=pass header.i=@mandrillapp.com
DKIM-Signature: v=1; a=rsa-sha1; c=relaxed/relaxed; s=mandrill; d=mail136-7.atl41.mandrillapp.com;
 h=From:Sender:Subject:Reply-To:To:Message-Id:Date:MIME-Version:Content-Type; i=contacto@mail136-7.atl41.mandrillapp.com;
 bh=QTHxKn1Liqi9ZJNIUiIqQFl0DNg=;
 b=Wep3W+aIvU17Xwa1SNM0he9Bf403lXYidvKGtwiZpb9QrccWY0DBqImsEqnEGNBKMdSpTd/MdyYW
   k2bgPf/yqHdwNXPDsqS3naEEs/gJC7dfIU+2zvGKp2fpGKsKyzhHkWITEMKV5DoMs3WPNKEPxopx
   l7GY4JpTaaSm7f+4B3M=
DomainKey-Signature: a=rsa-sha1; c=nofws; q=dns; s=mandrill; d=mail136-7.atl41.mandrillapp.com;
 b=JIWGJJlHUZt5grcY4at3yqUabbvCI/KrS/VNplK+n+Ty9cDuCQQEANkExNamBojv+SMXsL8URPnl
   igpbzKkhUk1WEvjufNYp6pZxAPkjHljuLpA+XdnYlgjCzvWJ4gI1QRuq3v5OeXxP6fcebsMSJrhn
   rKWFKYfrMCpZx8v4NXk=;
Received: from pmta04.mandrill.prod.atl01.rsglab.com (127.0.0.1) by mail136-7.atl41.mandrillapp.com id hk0cao1sb1ko for <apalabrados.co@gmail.com>; Fri, 10 Jul 2015 19:09:11 +0000 (envelope-from <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=mandrillapp.com; 
 i=@mandrillapp.com; q=dns/txt; s=mandrill; t=1436555350; h=From : 
 Sender : Subject : Reply-To : To : Message-Id : Date : MIME-Version : 
 Content-Type : From : Subject : Date : X-Mandrill-User : 
 List-Unsubscribe; bh=N1DazcpdS55HBslvogsYDTv2iLdRO0rnUDZkh9PCbtQ=; 
 b=OjcMKaAC4K4s1I3fpjFwqMGbYcayh7661XLVARyfmap3g1zZMW/+FWtGU2rzKrIF7wNbtC
 +4E06pOycBBa7Q/D6BGk8CtLQLtWBe260o9X7d4gvBAl70/t0zyqbkucPx82AKzXe956cwsB
 wiBB9xxxmgQdq/LJsmax3b1/+ZRWk=
From: "Contacto impresoras3d.com" <contacto@impresoras3d.com>
Sender: "Contacto impresoras3d.com" <contacto@mail136-7.atl41.mandrillapp.com>
Subject: =?utf-8?Q?Combinaci=C3=B3n=20Sorteo=2024/07/2015?=
Return-Path: <bounce-md_30672132.55a01856.v1-94c0ce7842b842caaa20ee481b5d5bda@mandrillapp.com>
Received: from [188.165.162.97] by mandrillapp.com id 94c0ce7842b842caaa20ee481b5d5bda; Fri, 10 Jul 2015 19:09:10 +0000
Reply-To: <contacto@impresoras3d.com>
To: <apalabrados.co@gmail.com>
X-Report-Abuse: Please forward a copy of this message, including all headers, to abuse@mandrill.com
X-Report-Abuse: You can also report abuse here: http://mandrillapp.com/contact/abuse?id=30672132.94c0ce7842b842caaa20ee481b5d5bda
X-Mandrill-User: md_30672132
Message-Id: <30672132.20150710190910.55a01856de9973.48448148@mail136-7.atl41.mandrillapp.com>
Date: Fri, 10 Jul 2015 19:09:10 +0000
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="_av-M8imh9jmVCY5HVEL4ea0TA"

--_av-M8imh9jmVCY5HVEL4ea0TA
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit

         0236
--_av-M8imh9jmVCY5HVEL4ea0TA
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit

<html>
                        <head>
                            <meta charset="utf-8">
                                <link href="http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600" rel="stylesheet" type="text/css">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                        <style>
                        .ticket_holder {
                                width:800px;
                                height:480px;
                                background-image:url(http://www.impresoras3d.com/img/sorteos/billete_sorteo_24-07-2015.jpg);
                                float:left;
                                margin:10px auto;
                                position:relative;
                        }
                        .ticket_number {
                                width:277px;
                                height:60px;
                                text-align:center;
                                position:absolute;
                                top:290px;
                                left:450px;
                                font-size:42px;
                                color:#11AA00;
                                font-family: Titillium Web, sans-serif;
                                font-weight:bold;
                        }
                        </style>
                        </head>

                        <body>
                                <div class="ticket_holder">
                                        <div class="ticket_number">0236</div>
                                </div>
                        <img src="http://mandrillapp.com/track/open.php?u=30672132&id=94c0ce7842b842caaa20ee481b5d5bda" height="1" width="1"></body>
                        </html>
--_av-M8imh9jmVCY5HVEL4ea0TA--

Gmail 去除了 head 标签，许多电子邮件客户端对 div 标签的样式提供了有限的支持。最好的办法是将 div 转换为表格并内联样式。有关内衬，请参阅 here for CSS compatability and here。