Gmail不在html邮件中执行CSS（svnspam）

Question

I am trying to setup svnspam . 我正在尝试设置svnspam 。 The setup and configuration went fine. 设置和配置很顺利。 But when the mails are sent to my Gmail id, they do not have the coloured diffs . 但是当邮件发送到我的Gmail ID时，他们没有彩色差异 。

Poking into the original mail through the Gmail view original interface I get to see the CSS like this: 通过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">

Now when I copy the whole html from the original source and create an html file locally I get to see the coloured diffs beautifully. 现在，当我从原始源复制整个html并在本地创建一个html文件时， 我可以很好地看到彩色差异。

What could be wrong here? 这可能有什么问题？

Answer 1

I just started working with HTML mail formatting a couple days ago, so I'm no expert. 我刚刚开始使用HTML邮件格式化，所以我不是专家。 I've found that it is not easy to support all the different mail clients out there. 我发现支持所有不同的邮件客户端并不容易。 The number one thing you need to do is use inline styles, as <style> blocks don't necessarily work in all clients. 您需要做的第一件事是使用内联样式，因为<style>块不一定适用于所有客户端。 Also, do not attempt to do regular CSS layout, you must use tables for layout. 另外，不要尝试定期进行CSS布局，必须使用表格进行布局。 This means lots of repeated code, messy tables, and such. 这意味着许多重复的代码，杂乱的表等等。 For instance: 例如：

  <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">

I read somewhere that some clients won't accept the <style> block in the <head> , but will in the <body> , so give that a try. 我在某处读到某些客户端不会接受<head>的<style>块，但会在<body> ，所以试一试。 Maybe gmail would support that. 也许gmail会支持这个。

Take a look at these free email templates for some ideas. 看看这些免费的电子邮件模板，了解一些想法。 Another thing I do is find a nicely formatted email that was sent to me and view its source. 我做的另一件事是找到一个格式很好的电子邮件，发送给我并查看其来源。 For instance, I used an email sent by Groupon.com, viewed the source, and took ideas from it. 例如，我使用了Groupon.com发送的电子邮件，查看了来源，并从中获取了想法。 Unfortunately, I later found that it doesn't look right in some clients, such as Evolution. 不幸的是，我后来发现它在某些客户端看起来并不正确，例如Evolution。 But it could be a starting point for you. 但它可能是你的起点。

Here's another SO question that has some helpful answers. 这是另一个SO问题，有一些有用的答案。

For completeness sake (and my own future reference), I'm including the awesome link * provided by @Cherian above. 为了完整起见（以及我自己未来的参考），我将包括@Cherian上面提供的精彩链接 *。 I had not seen that link before, but it contains a wealth of information! 我以前没见过那个链接，但它包含了大量的信息！ Great find... 很棒的发现......

**link has since died at original location. **链接已在原始位置死亡。 It is accessible at: http://web.archive.org/web/20090116092215/http://xavierfrenette.com/articles/css-support-in-webmail/ * 可通过以下网址访问： http ： //web.archive.org/web/20090116092215/http : //xavierfrenette.com/articles/css-support-in-webmail/ *

Answer 2

Tauren has given a great answer. 牛头人给出了一个很好的答案。

I've just found out that the new gmail interface (introduced in 2011) strips the background-color attribute from inline styles. 我刚刚发现新的gmail界面（2011年推出）从内联样式中剥离了background-color属性。 I've managed to work around this by using the bgcolor attribute on a tr element. 我已经设法通过在tr元素上使用bgcolor属性来解决这个问题。

Gmail不在html邮件中执行CSS（svnspam）

问题描述

2 个解决方案

解决方案1
10 2010-09-11 08:03:28

解决方案2
2 2012-03-13 12:09:04

Gmail不在html邮件中执行CSS（svnspam）

问题描述

2 个解决方案

解决方案1 10 2010-09-11 08:03:28

解决方案2 2 2012-03-13 12:09:04

解决方案1
10 2010-09-11 08:03:28

解决方案2
2 2012-03-13 12:09:04