Gmail не выполняет CSS в html почте (svnspam) - PullRequest
Новая
       10

Gmail не выполняет CSS в html почте (svnspam)

9 голосов
/ 11 сентября 2010

Я пытаюсь настроить svnspam .Настройка и настройка прошла нормально.Но когда письма отправляются на мой идентификатор Gmail, они не имеют цветных различий .

Выдвигая оригинальную почту через интерфейс Gmail view original, я вижу CSS следующим образом: 

<html>
<head>
<style type="text/css">
  body {background-color:#ffffff;}
  .file {border:1px solid #eeeeee;margin-top:1em;margin-bottom:1em;}
  .pathname {font-family:monospace; float:right;}
  .fileheader {margin-bottom:.5em;}
  .diff {margin:0;}
  .tasklist {padding:4px;border:1px dashed #000000;margin-top:1em;}
  .tasklist ul {margin-top:0;margin-bottom:0;}
  tr.alt {background-color:#eeeeee}
  #added {background-color:#ddffdd;}
  #addedchars {background-color:#99ff99;font-weight:bolder;}
  tr.alt #added {background-color:#ccf7cc;}
  #removed {background-color:#ffdddd;}
  #removedchars {background-color:#ff9999;font-weight:bolder;}
  tr.alt #removed {background-color:#f7cccc;}
  #info {color:#888888;}
  #context {background-color:#eeeeee;}
  td {padding-left:.3em;padding-right:.3em;}
  tr.head {border-bottom-width:1px;border-bottom-style:solid;}
  tr.head td {padding:0;padding-top:.2em;}
  .task {background-color:#ffff00;}
  .comment {padding:4px;border:1px dashed #000000;background-color:#ffffdd}
  .error {color:red;}
  hr {border-width:0px;height:2px;background:black;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" rules="cols">

Теперь, когда я копирую весь HTML из исходного источника и создаюHTML-файл локально Я вижу цветные различия красиво.

Что здесь может быть не так?

Ответы [ 2 ]

10 голосов
/ 11 сентября 2010

Я только начал работать с форматированием почты HTML пару дней назад, поэтому я не эксперт.Я обнаружил, что нелегко поддерживать все различные почтовые клиенты.Первое, что вам нужно сделать, это использовать встроенные стили, поскольку блоки <style> не обязательно работают во всех клиентах.Кроме того, не пытайтесь делать обычный макет CSS, вы должны использовать таблицы для макета.Это означает много повторного кода, грязных таблиц и тому подобное.Например: 

  <div style="width:590px; margin-top:10px;margin-right:auto;margin-bottom:5px;margin-left:auto; padding: 20px 20px 20px 20px; background-color:#89b556;background-image: url(http://groupon.s3.amazonaws.com/email-images/shared/bg-email-starburst.jpg);background-repeat: no-repeat;background-position: center top; border-width:5px; border-style: solid; border-color:#deedcc;-moz-border-radius:10px;-webkit-border-radius:10px; ">
    <table width="100%" style="background-color:#fff; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; *margin-top: -5px" cellspacing="0" cellpadding="0">

Я где-то читал, что некоторые клиенты не принимают блок <style> в <head>, но принимают в <body>, поэтому попробуйте.Может быть, gmail поддержит это.

Посмотрите на эти бесплатные шаблоны электронной почты , чтобы найти некоторые идеи.Другая вещь, которую я делаю, - это нахожу красиво отформатированное письмо, которое было отправлено мне, и просматриваю его источник.Например, я использовал электронное письмо, отправленное Groupon.com, просмотрел источник и взял из него идеи.К сожалению, позже я обнаружил, что в некоторых клиентах, таких как Evolution, это выглядит неправильно.Но это может быть отправной точкой для вас.

Вот еще один ТАК вопрос , на который есть несколько полезных ответов.

Ради полноты (и моей собственной будущей ссылки) яЯ включаю потрясающую ссылку *, предоставленную @Cherian выше.Я не видел эту ссылку раньше, но она содержит огромное количество информации!Отличная находка ...

** ссылка с тех пор умерла в исходном местоположении.Он доступен по адресу: http://web.archive.org/web/20090116092215/http://xavierfrenette.com/articles/css-support-in-webmail/*

2 голосов
/ 13 марта 2012

Таурен дал отличный ответ.

Я только что узнал, что новый интерфейс Gmail (представленный в 2011 году) удаляет атрибут background-color из встроенных стилей. Мне удалось обойти это, используя атрибут bgcolor для элемента tr.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...