Outlook 2007/2010/2013 Проблема с отображением электронной почты

Question

Outlook 2007/2010/2013 Проблема с отображением электронной почты

0

Проблема, которую я испытываю, проиллюстрирована на изображении ниже. Значки в левом столбце не корректно выровнены по вертикали в Outlook 2007, 2010 и 2013 годах. Я попытался испортить размер строки/размер шрифта безрезультатно.

Я нарисовал границы ячейки таблицы/строки, чтобы проиллюстрировать структуру, которую я использую. У каждого значка есть padding-top:5px чтобы правильно выравнивать текст в правом столбце.

Это код для строки:

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;padding-top: 5px;margin: 0;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
    data held to ransom in the last 12 months*.</td>
</tr>

Есть идеи?

FuriousD 22 окт. 2013, в 01:58

Источник

Теги:

html

css

email

outlook

outlook-2007

2 ответа

Ещё вопросы

John · Answer 1 · 2013-10-22T09-41-00.000Z

почему бы просто не использовать valign="middle" в ячейке таблицы, содержащей изображения?

<tr>
  <td class="icon" width="59" valign="middle">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>

UPDATE: Вот пример, если у вас больше текста. Ваше изображение будет выровнено вверху.

<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="icon" valign="top" width="59" valign="middle" style="padding-top:5px;">
    <img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="margin: 0; border: 0; padding: 0; display: block;">
  </td>
  <td valign="top" class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.<br>
    1 in 3 Australian SMBs have had their data held to ransom in the last 12 months*.
  </td>
</tr>
</table>

Я просто учел случаи, когда текст справа занимает более 2 строк, и в этом случае значок будет выровнен неправильно. Поскольку это не так, я опробую ваше предложение.
При использовании этого метода вертикальное смещение немного меньше, однако оно все еще там. Это как-то связано с высотой строки / размером шрифта. Я почти уверен, что просто не могу найти правильную комбинацию. Мужское мировоззрение - это боль.

Cliffmeister · Answer 2 · 2013-10-22T00-54-00.000Z

Если padding-top не работает для td, попробуйте применить css к самому img. Отредактируйте свой img css (см. Код ниже). Удалите верхнюю часть td.

<tr>
    <td class="icon" width="59" valign="top" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1em;color: #666666;"><img src="http://bangcampaign.com.au/McAfee/MCA6208/EDM/images/icon1.jpg" width="59" height="34" alt="Data held to ransom" style="display: block;border: none;margin-top: 5px;"></td>

    <td class="green" width="266" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 22px;color: #008e81;">1 in 3 Australian SMBs have had their 
data held to ransom in the last 12 months*.</td>
</tr>

Если предоставление максимального значения для img все равно не работает, попробуйте использовать его для заполнения или даже с помощью рамки (с шириной границы 5 пикселей)

Как насчет торговли верхней маржи с прозрачной границей? border-top может сработать (я делал много подобных хаков, когда создавал шаблоны электронной почты)