Фоновая максимальная ширина + фоновый градиент, который работает на веб-почтовых клиентах. (внешний вид и Gmail)

Question

Фоновая максимальная ширина + фоновый градиент, который работает на веб-почтовых клиентах. (внешний вид и Gmail)

0

Поэтому мне было поручено создать информационный бюллетень о сборе денег для лечения рака. Я, естественно, принял, но у меня возникла проблема с веб-клиентами электронной почты. (я пробовал outlook.com и gmail.com), веб-клиент, похоже, не согласен с некоторыми из моих стилей.

В "обычных" почтовых клиентах все проявляется так, как предполагалось. Снимок экрана для уточнения.

В Интернете я получаю следующее.

Теперь я сделал некоторые собственные поисковые запросы, и я нашел список, содержащий всю поддержку css, которую предоставляют несколько клиентов: http://www.campaignmonitor.com/css/

Мой код следующий. (я не могу вставить все это, поэтому я просто объясню больше всего, а затем вставлю часть). Содержимое существует из трех таблиц. Заголовок, тело и нижний колонтитул. Заголовок и тело имеют фон градиента, а нижний колонтитул имеет собственный фон градиента, но он исходит из одного и того же кода (просто называется классом, содержащим стили снова). Теперь мне было интересно, есть ли способ получить мой первый результат во всех почтовых клиентах. Если это невозможно, я буду принимать ответ, который даст результат, который наилучшим образом воспроизведет запрошенный результат.

редактировать

Чтобы получить фон нижнего колонтитула для расширения и под телом, я использовал отрицательный запас. Поскольку это не лучший и безопасный способ кодирования, это может вызвать одну из проблем?

Подводя итог другим:

К большому пространству между нижним колонтитулом и телом. (вероятно, из-за кода:

Запас-топ: -100; обивка-топ: 100px;

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

Marco Geertsma 16 апр. 2014, в 10:15

Источник

0

Итак, дальнейшее тестирование показало, что отрицательная маржа не работает в почтовых клиентах, но работает в веб-клиентах. Что странно, потому что раньше было наоборот. Больше исследований! В Манкаву!
Marco Geertsma 16 апр. 2014, в 08:42

Теги:

html

css

css3

email

compatibility

1 ответ

Ещё вопросы

Итак, дальнейшее тестирование показало, что отрицательная маржа не работает в почтовых клиентах, но работает в веб-клиентах. Что странно, потому что раньше было наоборот. Больше исследований! В Манкаву!

John · Answer 1 · 2014-04-16T10-33-00.000Z

Добро пожаловать в мир дизайна электронной почты html. Я предлагаю вам проверить эти ресурсы, чтобы помочь вам ускориться. Таким образом, вы получите менее неприятные сюрпризы, когда половина вашего кода не будет работать при тестировании.

В большинстве клиентов CSS3 не работает, поэтому вам может понадобиться изображение для вашего фона. 1px x 500px, повторенный в x, будет работать нормально. Единственный способ получить фоны, работающие в Outlook, - это либо тег тела (весь фон электронной почты), либо использование VML, что позволяет применять фоны для каждого элемента. Проверьте backgrounds.cm для решения VML.

Для изменения шрифта вам нужно объявить шрифт в каждом <td> или вы можете сделать это с помощью тегов <font> или <span>. Вот пример:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#EEEEEE">
      This is 14px Arial in black<br>
      <font style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #FF5555;">20px Arial in red</font>
    </td>
  </tr>
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:30px;" bgcolor="#DDDDDD">
      Unfortunately I have to put my font css inline here too, otherwise some clients will default to default (in Outlook this is Times New Roman)<br>
    </td>
  </tr>
</table>

Да, но дело в том, что он работал на каждом почтовом клиенте, кроме Outlook и веб-версии Gmail. Я не собираюсь заново делать весь мой код из-за этого. Есть ли способ обойти это? Может быть, добавить какой-нибудь код или что-то похожее на то, что должно быть?
Для Outlook VML - это единственный способ создания фоновых изображений или градиентов, просто подправьте код из backgrounds.cm и оберните его вокруг вашего текущего содержимого, это не будет чем-то большим, если вы используете таблицы (как и должно быть) ,