HTML 电子邮件签名 - 图片移至下方行

Question

我是 HTML 的新手，一直在尝试构建 HTML 签名，我已经设法让它在许多电子邮件客户端中工作，看看我想要什么但有时，例如在 iPhone 和 Hotmail/Outlook 中，第二个单元格中的社交媒体图标会移动到公司徽标下方。是否有我遗漏或可以改进的地方，以便它们与签名的其余部分保持一致？

以下是当前代码 - 我可能在代码中有一些不需要存在或看起来有点奇怪的东西，但这是我设法实现的最好的。

    <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">    
</td>
<div style="clear:both"></div>

非常感谢

Answer 1

如果你想把图片放在同一行，你应该使用 display : inline 而不是 display : block

 <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">    
</td>
<div style="clear:both"></div>

Answer 2

edit 更新了 codepen 和 litmus。试试这个。 codepen. Looks the same in all litmus tests.

编辑更新HTML

<div id="sig" style="min-width:400px;min-height:130px;max-width:600px;max-height:150px;padding:5px 0 0 5px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td rowspan="3">
    <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" width="454" height="117" alt="Lozi Designs" border="0" style="display:block;"/>
  </td>
  <td valign="middle">
    <a href="http://www.facebook.com/lozidesigns"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" border="0" style="display:block;"/></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.instagram.com/lozi_designs"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
</table>
</div>

请务必验证您的 html 代码。您使用了 table 元素，但没有用 <table> 标签包围它们，为相同的图像提供了不止一个替代文本，并且您的一些引号没有关闭（不是宽度下面的属性为例）。

打开：宽度="122 高度="122"

关闭：宽度="122" 高度="122"

编辑我清理了图像中的一些样式（不需要浮动徽标），并通过在 table 元素中将它们设置为零来删除 cellpadding/cellspacing。我重新检查了 Litmus，社交媒体图标出现了，我相信它们应该出现。

Answer 3

试试这个：

<table>
<tr><td>
<div style="float:left;"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" style="width:100%;max-width:600px;"></div></td><td>
<div width="38px" style="display:inline;">
<a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="100%" style="max-width:38px;"></a></div></td></tr></table>

它应该对任何电子邮件客户端或移动设备完全响应。

HTML 电子邮件签名 - 图片移至下方行

HTML Email Signature - Images moving to line below

html

email

signature