Question

我正在尝试发送带有图片边框的html电子邮件

<p align="center">
    <img src="images/pic1.jpg" width="443" height="148" align="middle" 
         style="border: 1px solid grey; padding:10px;" border="1"/>
</p>

但是，边框不会显示在任何电子邮件客户端中。我该如何解决这个问题？

Answer 1

说实话，你很难使用“p”标签。在这种情况下，表格将100％成为可能。我知道，我知道，桌子吹，但对于使用word作为他们的html渲染的电子邮件客户端 cough outlook cough 以及像hotmail和gmail运行html 1的那些（这可能有点像拉伸但是它的在那里的某个地方），你真的不知道事情将会如何发展。

至于您问题的答案，请尝试在图片上

display:block

。通常，您希望在所有图像以及高度和宽度上放置display：block，以确保图像切片之间没有奇怪的间隙。

Answer 2

主要问题是Microsoft Outlook，将图像封装在表中似乎可以完成这项工作。把每张图片都封闭起来很麻烦，但是dats em break：

<p align="center">
    <table><tr><td style="border: 1px solid grey;">
    <img src="images/pic1.jpg" width="443" height="148" align="middle" 
         style="padding:10px;"/>
    </td></tr></table>
</p>

Answer 3

有点偏离主题，但mailchimp有一个很好的工具，可以将普通的HTML布局与单独的CSS类转换为内联CSS版本

http://beaker.mailchimp.com/inline-css

还有一个很好的教程如何以正确的方式编写HTML电子邮件

http://kb.mailchimp.com/article/how-to-code-html-emails/

关于你的CSS问题。

尝试将图像包装在表格单元格中，并为单元格指定边框。

不幸的是，通过HTML电子邮件，桌子再次成为你的朋友。

玩得开心

Answer 4

尝试将颜色更改为其值，＃808080或者拼写正确的版本'灰色'

Answer 5

根据这个：http://www.campaignmonitor.com/css/边界应该正常工作。

我会尝试两件事：

首先在图片中添加以下内容，这也有助于Gmail渲染错误

display:block;

而且，也许可以尝试：

border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;

图像边框不显示HTML电子邮件

5 个答案: