В Gmail добавлен пробел внутри html-подписи из outlook - PullRequest
Новая
       18

В Gmail добавлен пробел внутри html-подписи из outlook

4 голосов
/ 09 марта 2011

Я создал HTML-подпись, которую нужно использовать в Outlook. Следуя рекомендациям, я использовал макет таблицы, учитывая все изображения и даже td, tr и саму таблицу, конкретную высоту и ширину, отступы и поля 0, и даже попытался добавить их как в css, так и в старом стиле на актуальные теги.
В перспективе это получается правильно, но в gmail это добавляет пробел между tr. Следуя этой рекомендации: Gmail отображает промежутки между изображениями , я попытался добавить style = "display: block;" к изображениям, все еще не повезло. Вот код, который я использую: 

<table cellspacing="0px" cellpadding="0px" border="0px" width="592px" height="254px" style="border-collapse:collapse; border:none; padding:0px; margin:0px; width:592px; height:254px;">
<tr cellspacing="0px" cellpadding="0px" width="592px" height="90px" style="padding:0px; margin:0px; width:592px; height:90px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="90px" style="padding:0px; margin:0px; width:83px; height:90px;">&nbsp;</td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="90px" style="padding:0px; margin:0px; width:150px; height:90px;"><img src="new_sig.files/sig2.png" width="150px" height="90px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="90px" style="padding:0px; margin:0px; width:359px; height:90px;"><img src="new_sig.files/sig3.png" width="359px" height="90px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="64px" style="padding:0px; margin:0px; width:592px; height:64px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="64px" style="padding:0px; margin:0px; width:83px; height:64px;"><a href="http://www.facebook.com"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></a></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="64px" style="padding:0px; margin:0px; width:150px; height:64px;"><img src="new_sig.files/sig5.png" width="150px" height="64px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="64px" style="padding:0px; margin:0px; width:359px; height:64px;"><img src="new_sig.files/sig6.png" width="359px" height="64px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="100px" style="padding:0px; margin:0px; width:592px; height:100px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="100px" style="padding:0px; margin:0px; width:83px; height:100px;"><img src="new_sig.files/sig7.png" width="83px" height="100px"></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="100px" style="padding:0px; margin:0px; width:150px; height:100px;"><img src="new_sig.files/sig8.png" width="150px" height="100px"></td>
<td cellspacing="0px" style="padding:0px 5px 0px 15px; margin:0px; width:339px; height:100px;line-height:16px; font-size:12px;color:#4f4f4f;font-family:arial;" >
Name LastName<br/>
Description<br/><br/>
<a href="http://www.site.com" style="color:#0875a4;">www.site.com</a>
<img src="new_sig.files/phone_icon.png" width="18px" height="28px"/>
972-(0)3-6960556
<img src="new_sig.files/mail_icon.png" width="18px" height="28px"/>
<a href="mailto:name@site.com" style="color:#0875a4;">name@site.com</a>
</td>
</tr>
</table>

Теперь код, который читает gmail, по-видимому, выглядит так: 

<table width="592" cellspacing="0" cellpadding="0" border="0" style="width: 444pt; border-collapse: collapse;">
<tbody>
<tr style="min-height: 67.5pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">&nbsp;</span></p>
</td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr>
<tr style="min-height: 48pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 48pt;">
<p class="MsoNormal"><a target="_blank" href="http://www.facebook.com/"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td><td width="150" style="width: 112.5pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td></tr>
<tr style="min-height: 75pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"></span></p></td>
<td width="339" style="width: 254.25pt; padding: 0in 3.75pt 0in 11.25pt; min-height: 75pt;">
<p style="line-height: 12pt;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(79, 79, 79);">Name LastName<br>Description<br><br><a target="_blank" href="http://www.site.com">
<span style="color: rgb(8, 117, 164);">www.site.com</span></a> </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">972-(0)3-6960556 </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<a target="_blank" href="mailto:name@site.com">
<span style="color: rgb(8, 117, 164);">name@site.com</span></a> </span></p></td></tr>
</tbody></table>

Я также пытался задать всю высоту строки таблицы 0, но это тоже не сработало.
2 изображения в последней ячейке, кстати, почему-то не отображаются в gmail.

обновление: до сих пор не заметил, что получил больше ответов. мы немного упростили дизайн / код, и через некоторое время я перестал проверять эту страницу. Не уверен, что какое-либо из решений здесь сработало бы, но я вижу, что они помогли другим людям. спасибо в любом случае:)

Ответы [ 5 ]

13 голосов
/ 08 апреля 2011

Для ячеек таблицы, которые содержат только изображение, установите высоту строки равной 0 

<td style="line-height:0"><img ... /></td>

(Email на Acid был хорошим советом.)

0 голосов
/ 05 июля 2012

Решение сработало для меня, я суммирую каждое решение, приведенное здесь

сделал что-то вроде: 

        <td rowspan="2" style="line-height:0">
<img src="images/myimage.jpg" width="426" height="183" alt=""border="0" style="display:block;" />
</td>

и у меня все работало нормально ...

0 голосов
/ 22 апреля 2011

Вы упомянули, что пытались добавить style = "display: block" к вашим изображениям, но я не вижу этого в вашем коде. Несколько вещей исправили эти ситуации для меня в Gmail:

  • Добавить border = "0" и style = "display: block" в каждый элемент
  • При указании ширины и высоты в атрибутах (а не в атрибуте "style") не включайте "px", просто число

Поэтому, если вы убедитесь, что все ваши изображения в следующем формате, они должны удалить эти пробелы (при условии, что они не помещены туда с неправильными значениями высоты). 

<img alt="something" src="http://somewhere.com/image.png" width="35" height="35" border="0" style="display:block;" />
0 голосов
/ 26 марта 2011

Попробуйте поместить это в голову: 

<style type="text/css">
    <!--
        p.MsoNormal {
            margin: 0px !important;
        }
    -->
</style>

Следует переопределить стиль, который невольно появляется в Gmail.

0 голосов
/ 09 марта 2011

Что ж, я не смог воспроизвести проблему, отправив электронное письмо на мою учетную запись Gmail, но я обнаружил проблему при проверке HTML в браузере Opera.

Попробуйте добавить vertical-align: middle; к проблемной<TD>.Это помогло Opera.

То есть, конечно, не видя изображения, но вертикальное выравнивание не должно ничего тормозить.

Вы также можете попробовать этот инструмент:http://www.emailonacid.com/

Бесплатная версия позволяет проверять AOL Web, Gmail и Outlook 2003.

...