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

編輯更新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屬性）。

打開： 寬度= 「122高度=」 122"

閉： 寬度= 「122」 HEIGHT = 「122」

編輯 我清理了一些的樣式在圖片（你不需要浮動的標誌），並通過將它們設置爲零表格元素中刪除cellpadding/cellspacing我重新檢查了石蕊和社交媒體圖標出現，因爲我相信他們應該

Answer 2

如果你的意思是讓圖像在同一行，你應該使用的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 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> 

這應該是任何電子郵件客戶端或移動設備充分響應。