6

我遇到了一个问题,即使带有width属性,图像也会以本机尺寸显示:

这是我的测试html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>test</title>
</head>
<body>

    <div>
        <p>Embeded 1</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Embeded 2</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 1</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 2</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>

</body>
</html>

这是 Apple Mail 7.0 的屏幕截图

在此处输入图像描述

编辑 这是原始电子邮件正文:

Received: from [xxx] (helo=xxx)
    by xxx with esmtp (Exim 4.68)
    (envelope-from <xxx>)
    id 1VfX9Z-0002AE-Ki; Sun, 10 Nov 2013 16:42:21 +0100
Return-path: <xxx>
X-Envelope-To: xxxx
Received: from [xxx] (helo=xxx)
    by xxx with esmtp (Exim 4.68)
    (envelope-from <xxxx>)
    id 1VfX9Z-0004By-IS
    for xxx; Sun, 10 Nov 2013 16:42:21 +0100
Received: from [xxxx] (helo=xxx)
    by xxx with esmtpa (Exim 4.68)
    (envelope-from <xxx>)
    id 1VfX9Z-0007f1-4u
    for xxx; Sun, 10 Nov 2013 16:42:21 +0100
Received: by xxx (Postfix, from userid 501)
    id CF8EA3B8AA0A; Sun, 10 Nov 2013 16:42:20 +0100 (CET)
To: xxx
Subject: xxx
Date: Sun, 10 Nov 2013 15:42:20 +0000
From: xxx <xxx>
Message-ID: <xxx>
X-Priority: 3
X-Mailer: revaxarts-themes demo
MIME-Version: 1.0
Content-Type: multipart/alternative;
    boundary="b1_e1c39bd3cc07c9a37a6ae66b52e2753d"
Content-Transfer-Encoding: 8bit
X-Df-Sender: eGF2ZXJAcmV2YXhhcnRzLmNvbQ==
X-Spam-Checker-Version: SpamAssassin 3.3.1 (2010-03-16) on
    spamfilter16.ispgateway.de
X-Spam-Level: 
X-Spam-Status: No, hits=0.0 required=9999.0 tests=BAYES_50 autolearn=disabled
    version=3.3.1
X-Spam-CMAETAG: v=1.1 cv=eqI3rwYZn7zV4UmkNMmt7weZSwHui2Vc5AUAV4IajoU=
    c=1 sm=0 a=um-k4-9LFHQA:10 a=FP3bJtu2gI4vAIHRqdwASw==:17
    a=RELTunctmil-TFG8TWAA:9 a=QEXdDO2ut3YA:10 a=ezkJIM3X4EQA:10
    a=_5yxvZR9Ds0A:10 a=SSmOFEACAAAA:8 a=1hle9SxZAAAA:8
    a=PTYHS11jASYzloMs0H4A:9 a=_W_S_7VecoQA:10 a=p403mkujtbAA:10
    a=jbmgarMCn3JHYSELxa8A:9 a=HXjIzolwW10A:10 a=_moxOrh7Pwr-ZIKs:18
    a=yE_UcD7gtxtlVJ_mbRcA:9 a=nDhcKlyyXGP8reDK:18
    a=HpAAvcLHHh0Zw7uRqdWCyQ==:117 xcat=Undefined/Undefined
X-Spam-CMAECATEGORY: 0
X-Spam-CMAESUBCATEGORY: 0
X-Spam-CMAESCORE: 0

--b1_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit

Embeded 1

Embeded 2

Linked 1

Linked 2


--b1_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: multipart/related;
    boundary="b2_e1c39bd3cc07c9a37a6ae66b52e2753d"

--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    </head>
    <body>

        <div>
            <p>Embeded 1</p>
            <img src="cid:110e4c63bcdb73309ff786e1f8a5e8fb@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:110e4c63bcdb73309ff786e1f8a5e8fb@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:896b1e037817a7de25fbdb672ea7d63a@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:896b1e037817a7de25fbdb672ea7d63a@phpmailer.0" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Embeded 2</p>
            <img src="cid:110e4c63bcdb73309ff786e1f8a5e8fb@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:110e4c63bcdb73309ff786e1f8a5e8fb@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:896b1e037817a7de25fbdb672ea7d63a@phpmailer.0" alt="" width="200" height="100" />
            <img src="cid:896b1e037817a7de25fbdb672ea7d63a@phpmailer.0" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Linked 1</p>
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        </div>
        <div>
            <p>Linked 2</p>
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
            <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        </div>

    </body>
    </html>


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: image/png; name="embeded400x200.png"
Content-Transfer-Encoding: base64
Content-ID: <110e4c63bcdb73309ff786e1f8a5e8fb@phpmailer.0>
Content-Disposition: inline; filename=embeded400x200.png

iVBORw0KGgoAAAANSUhEUgAAAZAAAADIBAMAAAA0O6rRAAAAG1BMVEUAAAD/Dw4fAQF/BwefCQi/
CwpfBQXfDQw/AwOUadmkAAAFS0lEQVR4nO2YzVPjRhDFhSwbHXfA2BwNIUWO6yxJrtZCsntESXYr
R1z54mizpMhRJrsu/9k7PdMj9VgjQcmHpFLvV5SR26+lfqP5kqIIAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwHL4pWn7sz54fJb66nZTH8foxoIg3TRKZ24XspuXHk8Vz
ovlLruuNUuPXHDxbKnUvSusd0ufHZYPEy+3E7kZ6amYPpuryVaZecnD46kIdVqq9A/3xnTq6vMjV
TV0ic7uxu5EVG+mZOqa2MvOvJyqbk0i91R9xNqpJvNxu7G5kmc9sqcf0mZr2HqiCvqxGlWqiP2zf
6anJtkTmdmRnI8mhaWxdqj3TnH7dtw4GY6caHIkUM6g8icztyM5G5tfWSI9L7VP/mF7bL24eiPrH
MmWxJfFyO7KrkVhNrBFuYdvE3MJVE69kzsmLLYmX25FdjfRHdhzb6gg9AmLFx2auql2Gop5E5j5B
fPHuByNa68OfCz2wvr8s+Apf8KFQRdE/FLQlh6PMdMZG5txVovymGhF9burYa2qq3ZPI3Cd85OpB
DY10MlX6KM7H6sgaOVNjNS58VfSl0gtUYUoOR5l0zDNrlLnhoK0lrq/3hvzf6/x0AzyJzG1nPiyi
NCff+dnhJF3Ozs0nXf9WfR2ldmqvVKl6H8V/HpqSw1Fm/9gZKRtTN6+7EWW7l13MsLqOfInMbSU1
c3ZCzZNPddL5Qa4DJzSTZNmdEwjVuWmvbLpoijqoLa2RZeHKXBh79sLcpfyWpiRPInNb4VmB9LlZ
T48oYO57Np64MwhVZi6cqMYoY1qcjUw4pm/YvrsBbmyUP5ogDWlPInNb4TtGV8xNt1emp1AVmT2h
GHJaFfPssVw0Rd2F70oj5YSjR0DZk3hu8pZD24CeROa2wpPf3sItUWYvYJrLtrK5VKUa8BilOT4c
ZUznZiMutveC/hgb9ZbD6OTAqiqJzG2Fb11fn4EGhwtQPk8Y4gZrVcIjke50OGqxk9LTRvyub9qy
mxHuqckxTb9bRm5Kr5XKjUQqORyNRIFPdy1vObT7kU5dyw253qjZSF4IlRuJuuRwlM9rT/PkYPeX
wzmNq26DPVUPllYjQuXusD5vOGrhtWDLyEoYsdNvIpdDO537EpnbbuSd5Zd2I6XKMxKKWsRk2Log
nsjlkJ9ROi2IqZj9WoxUKmkkGDXE6vGUmL4+PW3dosjl0D08ddqiyD7aPNiFKjBG/KhhoCrcfYns
ppEnam53uRy6h0ZPInNbUdVhkxE5CZbzPpUcjhLplSW/v7pq28bL5bB8mu22jbeLR9hItY5UKrdZ
pbEXjkr4wYptmvHtNk9GKpfDefkULyVebhui69WMXJdFVio3MGh7GI7WjTQ/6q6qETyoXi90etQV
00bNiG2i8wNPZZsrpu1hOFo30vzyQXT8aXVzOr186FW9tGbEVkdbLqGyi9Y5bQ/D0YCRptdBYrpI
7AOcddDpdVD+oxGGjPw+MleYeKrkSH9PH8ywDkfrRhJTxtzORuZGD8yrO7Ec5nciTUj83DYS9X6z
+Y3Krxl5zD/oX+58VZQNb9f537RdbojWjUTT8eWvb8pXpvffXiyNhWr/lKi/yoXZk/i5rXyiyf6n
KGCkGORKfdhSRYMlBW3J4WjdSJpp3VsOftTHw8LUOKuMMKMtyVZuK+kfja/t4/VtXRWvN4FcGQ2w
uS2qJCeVy+FWTfJsMvc/SXr5b1cAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAD8r/kMq7dYR24m8s8AAAAASUVORK5CYII=


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d
Content-Type: image/png; name="embeded200x100.png"
Content-Transfer-Encoding: base64
Content-ID: <896b1e037817a7de25fbdb672ea7d63a@phpmailer.0>
Content-Disposition: inline; filename=embeded200x100.png

iVBORw0KGgoAAAANSUhEUgAAAMgAAABkBAMAAAAxqGI4AAAAG1BMVEUAAAD/Dw4/AwN/BwefCQgf
AQFfBQXfDQy/CwqPUrJGAAACKUlEQVRoge2UO2/iQBSFD37hkmYfpRW0CaUVJ4gSsWiX0lsQtrSi
RHGJggiUFnGIf/beO+O3kRJlt1npfhIH+9zRnJk7IwOCIAiCIAiCIAiCIAjCv8SZ1t+MpHwcsdws
Ug+wJ5XSGNZLtO2Ph2y+3TwBF/eVAv0Q+L1B2/54CLECHknDXFXBeArQtv8qxPVMGmJOtZJxAB7C
QL/U7DbG1TVs7y6yg4hChmOyht9pNcMxhXARRhBVIa5HnV9r1eu4RsCFut1hfvbgmZPb+ejsGc58
NtzCmp0/wjqeHxNVxOI2jvPB/ZAPAVutgBWxG+izqew2tDt7bX5C/4Ua7nwGYlxx72naVaKKTgJ7
X7atx39breqMdEjTbsPhB5rM9emR5iPd8u6p2U6iityDYicHPdtBq5q+FlLanRD6jU2fN+6GfPCW
R001owE3XBV7KA+eFtOcbfu+kF9Zlm0aIfdfs+zVVyGqWAuJW33Jb+Ob7VJdbYao66FCVLEKcV70
NcJAqz5uFLertDv02iGuN8jXYySqyDPpkJieLJ8LWnGHIqRhd1CXsAxZ89Z+sE9iJarIslBLoY3A
oCFupLVof9CyO9j0JQjLkBQ4YuXB5q9DnKiiTb3PeOgcuU5yLRYdNO0TjNLFtAyZpT99GNk8hbFf
XCaqiIv0mdvlfNntdhHM/Ss1VakVVSE1+xTL+hfN5hd7WTzp4rK597BQ97QtCIIgCIIgCIIgCMJ/
yR8xnoWK3AkfWgAAAABJRU5ErkJggg==


--b2_e1c39bd3cc07c9a37a6ae66b52e2753d--


--b1_e1c39bd3cc07c9a37a6ae66b52e2753d--

图像嵌入了phpMailer,因此源看起来可能略有不同,但宽度属性将保留。

只有第一个嵌入的图像受到影响

用 Litmus 进行了测试,所有其他邮件都按预期工作。甚至Apple Mail 5Apple Mail 6

这是 Apple Mail 中的错误还是我错过了什么?

4

2 回答 2

2

我意识到这是一岁了,但在搜索时找不到解决方案。我们遇到了类似的问题(特别是在 Apple Mail 7 和 8 中),并且在 img 标签上使用内联 CSS 解决了它。

例如,而不是:

<div>
    <p>Embeded 1</p>
    <img src="embeded400x200.png" alt="" width="200" height="100" />
    <img src="embeded400x200.png" alt="" width="200" height="100" />
    <img src="embeded200x100.png" alt="" width="200" height="100" />
    <img src="embeded200x100.png" alt="" width="200" height="100" />
</div>

利用:

<div>
    <p>Embeded 1</p>
    <img src="embeded400x200.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded400x200.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded200x100.png" alt="" style="width:200px;height:200px" width="200" height="100" />
    <img src="embeded200x100.png" alt="" style="width:200px;height:200px" width="200" height="100" />
</div>
于 2015-04-28T13:37:24.390 回答
1

您的 HTML 无效,请使用验证工具修复错误。特别是你的两个 div 没有关闭,这不会过去。

我给自己邮寄了固定版本,并在苹果邮件(第 7 版)中毫无问题地阅读了它,因此这可以解决您的问题,或者您需要附加您正在使用的实际 PHPmailer 代码或其实际生成的 HTML。

这是您的 XHTML 的有效版本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mail subject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
    <div>
        <p>Embeded 1</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Embeded 2</p>
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded400x200.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
        <img src="embeded200x100.png" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 1</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
    <div>
        <p>Linked 2</p>
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&amp;text=linked+200/100" alt="" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&amp;text=linked+400/200" alt="" width="200" height="100" />
    </div>
</body>
</html>
于 2013-11-08T20:29:17.403 回答