Question

在阅读了这个问题的一些答案后，似乎没有人解决了这个问题。我正在尝试通过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 />

Answer 1

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

  <span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>

Answer 2

每个图像之间都有一个间隙，这是问题的一部分。另外，尝试给出图像display: block样式。

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

Answer 3

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

我建议您阅读http://24ways.org/2009/rock-solid-html-emails了解很多提示，包括图片的整个部分。特别是使用img {display:block;}用于Hotmail，align用<img src="image.jpg" align="right">代替浮点数。

并不是说你必须把这些部分做错了，但总的来说它们是值得记住的。

使用html删除图像之间的空白区域

3 个答案: