我遇到了一个问题,即使带有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&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
</div>
<div>
<p>Linked 2</p>
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&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&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
</div>
<div>
<p>Linked 2</p>
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" alt="" width="200" height="100" />
<img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" alt="" width="200" height="100" />
<img src="http://dummyimage.com/400x200/000/fff&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 5和Apple Mail 6
这是 Apple Mail 中的错误还是我错过了什么?