3

在阅读了这个问题的许多答案之后，似乎没有一个人解决了这个问题。我正在尝试通过 VerticalResponse 发送和发送电子邮件，他们使用 html。该消息是堆叠多个图像创建的，每个图像都有链接，但它应该看起来像一个图像。问题是预览看起来不错，在网页中查看也是如此，但电子邮件显示在每个图像之间显示空白。有关代码，请参见http://jsfiddle.net/xMW7N/42/。请帮忙！

<body>
    <div style="text-align: center; ">
        <span style="font-size:8pt;"><a href="website"><img align="normal" alt="Facebook - MetricRunFest" border="0" height="126" hspace="-20" name="FB" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Top.jpg?0.7593426643870771" style="width: 600px; height: 126px;" title="Facebook - MetricRunFest" vspace="0" width="600" /></a></span><br />
        <span style="font-size:8pt;"><a href=website"><img align="normal" alt="Metric Runners - Online Photos" border="0" height="205" hspace="-2" name="MetricRunFest - Online Photos" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank.jpg?0.8384064519777894" style="width: 600px; height: 205px;" title="Metric Runners - Online Photos" vspace="0" width="600" /><br />
        <img align="normal" alt="website" border="0" height="127" hspace="-2" src="https://141790a61d-custmedia.vresp.com//a091cd9b91/Message%20Blank_UpsideDown%209.jpg?0.44395816628821194" style="width: 600px; height: 127px;" title="website" vspace="0" width="600" /></a></span><br />
4

3 回答 3

1

每个图像之间都有一个中断空间，这是问题的一部分。另外，尝试赋予图像display: block风格。

http://jsfiddle.net/xMW7N/47/

于 2012-11-20T20:53:43.883 回答
1

不同的浏览器对空白的处理方式不同。如果可能，最好将所有内容写在 1 行上，没有不必要的空格或换行符。你可以这样尝试：-

  <span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>
于 2012-11-20T20:39:45.097 回答
0

我在 html 电子邮件中看到的所有内容，以及我自己做这些邮件的经验，不幸的是，最好的选择是使用表格。它确实可以帮助解决所有布局问题。

我建议阅读http://24ways.org/2009/rock-solid-html-emails以获得很多提示，包括关于图像的整个部分。特别是img {display:block;}用于 Hotmailalign等<img src="image.jpg" align="right">而不是浮动。

并不是说您一定做错了这些部分，但总的来说它们很容易记住。

于 2012-11-20T20:49:42.363 回答