Подпись электронной почты 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>, для одних и тех же изображений было указано более одного текста alt, а некоторые из ваших цитат не были закрыты (а не атрибут width ниже в качестве примера).

Open: ширина = "122 высота =" 122"

Закрыто: ширина = "122" высота = "122"

редактировать я вымыл некоторые из стилей в (вам не нужно было плавать с логотипом) и удалил cellpadding/cellspacing, установив их в ноль в элементе таблицы. Я перепроверил Litmus и значки в социальных сетях, как мне кажется.

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> 

Он должен быть полностью отзывчивым для любого почтового клиента или мобильного устройства.