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

编辑更新了codepen和石蕊。试试这个。 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>标记围绕它们，为同一图像指定了多个替代文字，并且某些引号未关闭（不是下面的宽度属性）作为一个例子）。

打开： width =＆＃34; 122 height =＆＃34; 122＆＃34;

闭：宽度=＆＃34; 122＆＃34;高度=＆＃34; 122＆＃34;

修改我清理了图像中的一些样式（您不需要浮动徽标），并通过在表格元素中将它们设置为零来删除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电子邮件签名 - 图片移至

3 个答案: