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。在所有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> 标签包围它们，为相同的图像提供了多个替代文本，并且您的一些引号没有关闭（不是下面的宽度属性作为示例） .

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

关闭： 宽度=“122”高度=“122”

编辑 我清理了图像中的一些样式（您不需要浮动徽标），并通过在表格元素中将它们设置为零来删除单元格填充/单元格间距。我重新检查了 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>

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