2012-03-26 4 views
4

Я использовал Bootstrap Twitter в формате HTML дайджест электронной почты.Bootstrap twitter CSS не работает в gmail

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

Любая идея, почему это происходит?

Мой электронный макет:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' /> 
     <link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' /> 
    </head> 
    <body id='email'> 
     <div class="container"> 
      <%= yield %> 
     </div> 
    </body> 
</html> 

digest.html.erb

 <div class="row"> 
     <div class="span4">...</div> 
    </div> 
     ... 

Бутстраповское твиттер CSS форматирование digest.html.erb не применяется или шоу при просмотре в Gmail. Форматирование действительно хорошо работает в моем почтовом клиенте Mail (mac).

Источник из электронной почты в Gmail:

----==_mimepart_4f71da44a148b_612e3fe48e034ec4200f0 
Date: Tue, 27 Mar 2012 17:18:28 +0200 
Mime-Version: 1.0 
Content-Type: text/html; 
charset=UTF-8 
Content-Transfer-Encoding: quoted-printable 
Content-ID: <[email protected]ocal.mail> 

<!DOCTYPE html> 
<html> 
    <head> 
    <meta content=3D'text/html; charset=3DUTF-8' http-equiv=3D'Content-Ty=pe' /> 
    <link href=3D'http://twitter.github.com/bootstrap/assets/css/bootstrap=.css' rel=3D'stylesheet' /> 
</head> 
    <body id=3D'email'> 
       = 


    <div class=3D"container"> 
     <br/> 
    ....\ 

Я замечаю все эти 3D-префиксы и некоторые случайные = в тексте, но я не считаю, что это проблема. Любые идеи?

+0

'3D' - это шестнадцатеричный код ASCII для символа' = '. Учитывая это, похоже, что в ERB или в каком-то плагине, который работает в тандеме с ERB? Попробуйте изменить расширение имени файла на 'digest.text.html.erb'? Обратите внимание, что даже '=', встроенный в строку ('content = 'text/html; charset = UTF-8''), экранируется. – Zabba

ответ

4

читать this article, что объясняет, что <head> часто игнорируется почтовыми клиентами. Как правило, вы хотите, чтобы включать все стили внутри тега тела, предпочтительно, применяя их к каждому элементу

т.е.

<p style="font-family:pupcat;text-size:15px;line-height:19px;">Blah</p> 

вы должны исправить эти опечатки тоже, они не помогут вам

0

Еще один полезный ресурс - this article, в котором объясняется, как получать хорошие электронные письма, и почему то, что вы пытаетесь сделать, потерпит неудачу с Gmail, Ou tlook и т. д.

Смежные вопросы