Gmail 更改了我的文字颜色答案

【问题标题】：Gmail changes the color of my textGmail 更改了我的文字颜色
【发布时间】：2017-10-19 00:16:50
【问题描述】：

我创建了一封邀请电子邮件，当我将其发送到 Gmail 时，它会改变我的文本颜色。

它将<span class="im"> 和color:#500050 添加到我的文本的某些部分。

如何解决这个问题？

这是我的电子邮件截图：

这是我电子邮件的 html 内容：

<body style="margin:0; padding:0; background-color:#ececec;">
  <center>
    <!--[if (gte mso 9)|(IE)]>
          <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
          <td>
          <![endif]-->
    <table bgcolor="#ececec" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
      <tr>
        <td>&nbsp;
        </td>
      </tr>
      <tr>
        <td bgcolor="#3fb618" height="6" style="width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;">
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="center" valign="top" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/logo_inverse.png" height="94" width="188" alt="Logo S1BIOSE" style="border-width: 0; max-height: 94px; max-width: 188px;" />
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="center" valign="bottom">
          <font style="font-size: 16px; color: #5b5f65; font-family: Arial, Helvetica, sans-serif;"><strong>INVITATION SUR S1BIOSE</strong></font>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="left" width="100%">
          <table border="0" cellpadding="0" cellspacing="0" style="padding-left: 40px;">
            <tr>
              <td height="20" width="30" align="left" style="font-size: 20px; line-height: 20px; max-width: 30px; border-bottom: 2px solid #3fb618;">&nbsp;
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="left" style="padding: 0px 40px 20px 40px;">
          <p style="color: #5b5f65; font-size: 22px; text-align: left; font-family: Verdana, Geneva, sans-serif;">
            Bonjour ,
          </p>
          <p style="color: #5b5f65; font-size: 16px; text-align: left; font-family: Verdana, Geneva, sans-serif;">
            vous recevez cet email, car un membre du site S1BIOSE vous invite à le rejoindre. Voici son profil :<br /><br /> xxx
            <br /><br /> Compatible pc, tablette et mobile, notre site vous permet de créer gratuitement :<br /><br /> - votre page entreprise et d’y associer vos produits et vos services.<br /> - votre profil pour vous présenter et entrer en relation
            avec les autres utilisateurs.<br /> - votre groupe pour y publier des articles, recettes, discussions, événements, annonces et itinéraires.<br /> C’est un formidable moyen pour partager votre passion et de vous faire connaître.<br /><br />            La marketplace est réservé aux artisans et aux producteurs travaillant avec des matières naturelles.<br /><br /> Une application Android et iOS est en développement. Elle permettra de géolocaliser les artisans et les producteurs à proximité
            de vous.<br /><br /> Je vous souhaite une bonne découverte du site.<br /><br /> Cordialement <br />
            <img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/signature.png" width="212" height="61" alt="Mathieu LEBERT" border="0" /><br/> Administrateur du site
          </p>
        </td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" align="center">
          <table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
            <tr>
              <td bgcolor="#3fb618" width="250" height="60" align="center" valign="middle"><a href="https://www.s1biose.com/node/139" target="_blank" style="width: 250; display: block; text-decoration: none; border: 0; text-align: center; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; background:#3fb618;">Ça m'intéresse</a>
              </td>
            </tr>
            <tr>
              <td bgcolor="#ffffff" align="center" height="50" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#3fb618" align="center" valign="top" style="font-size:14px;">
          <table bgcolor="#3fb618" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td bgcolor="#3fb618" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;">
                <font style="font-size: 13px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-align: center;">
                  S1BIOSE, 5 le clos de la Cramière, 61430 Athis Val de Rouvre <br/>
                  <a href="tel:0768805052" target="_blank" style="text-decoration: none; color: #ffffff;">tel : 07 68 80 50 52</a><br />
                  <a href="mailto:contact@s1biose.com" target="_blank" style="text-decoration: none; color: #ffffff;">contact@s1biose.com</a></font>
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" height="10" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;">
                <table width="250" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="50" align="center">
                      <a href="https://www.facebook.com/S1biosecom" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_facebook.png" alt="Facebook" width="32" height="32" border="0" /></a>
                    </td>
                    <td width="50" align="center">
                      <a href="https://twitter.com/S1biosecom" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_twitter.png" alt="Twitter" width="32" height="32" border="0" /></a>
                    </td>
                    <td width="50" align="center">
                      <a href="https://plus.google.com/109340539723554321241" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_google_plus.png" alt="Google+" width="32" height="32" border="0" /></a>
                    </td>
                    <td width="50" align="center">
                      <a href="https://www.pinterest.fr/S1biosecom/pins/" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_pinterest.png" alt="Pinterest" width="32" height="32" border="0" /></a>
                    </td>
                    <td width="50" align="center">
                      <a href="https://www.youtube.com/channel/UCClgO9z4XrjrGx7FD0YIBng/featured" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_youtube.png" alt="YouTube" width="32" height="32" border="0" /></a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" height="10" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;">
                <font style="font-size: 13px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-align: center;">Copyright © 2017 <a href="https://www.s1biose.com" target="_blank" style="text-decoration: none; color: #ffffff;">s1biose.com</a> - Tous droits réservés.</font>
              </td>
            </tr>
            <tr>
              <td bgcolor="#3fb618" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#3fb618" height="6" style="width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
        </td>
      </tr>
      <tr>
        <td>&nbsp;
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
          </td>
          </tr>
          </table>
          <![endif]-->
  </center>

【问题讨论】：

标签： css email templates

【解决方案1】：

您可以尝试将您的代码更新为此。希望它会有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Invitation sur S1BIOSE</title>
    <style type="text/css">
    </style>
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
    </style>
    <![endif]-->
  </head>
  <body style="margin:0; padding:0; background-color:#ececec;">
    <center>
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td>
      <![endif]-->
      <table bgcolor="#ececec" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
        <tr>
          <td>&nbsp;
          </td>
        </tr>
        <tr>
          <td bgcolor="#3fb618" height="6" style="width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;">
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="center" valign="top" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/logo_inverse.png" height="94" width="188" alt="Logo S1BIOSE" style="border-width: 0; max-height: 94px; max-width: 188px;" />
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="center" valign="bottom"><font style="font-size: 16px; color: #5b5f65 !important; font-family: Arial, Helvetica, sans-serif;"><strong>INVITATION SUR S1BIOSE</strong></font>
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="left" width="100%">
            <table border="0" cellpadding="0" cellspacing="0" style="padding-left: 40px;">
              <tr>
                <td height="20" width="30" align="left" style="font-size: 20px; line-height: 20px; max-width: 30px; border-bottom: 2px solid #3fb618;">&nbsp;
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="left" style="padding: 0px 40px 20px 40px;">
            <p style="color: #5b5f65 !important; font-size: 22px; text-align: left; font-family: Verdana, Geneva, sans-serif;">
              Bonjour ,
            </p>
            <p style="color: #5b5f65 !important; font-size: 16px; text-align: left; font-family: Verdana, Geneva, sans-serif;">
              vous recevez cet email, car un membre du site S1BIOSE vous invite à le rejoindre. Voici son profil :<br /><br />
              xxx<br /><br />
              Compatible pc, tablette et mobile, notre site vous permet de créer gratuitement :<br /><br />
              - votre page entreprise et d’y associer vos produits et vos services.<br />
              - votre profil pour vous présenter et entrer en relation avec les autres utilisateurs.<br />
              - votre groupe pour y publier des articles, recettes, discussions, événements, annonces et itinéraires.<br />
              C’est un formidable moyen pour partager votre passion et de vous faire connaître.<br /><br />
              La marketplace est réservé aux artisans et aux producteurs travaillant avec des matières naturelles.<br /><br />
              Une application Android et iOS est en développement. Elle permettra de géolocaliser les artisans et les producteurs à proximité de vous.<br /><br />
              Je vous souhaite une bonne découverte du site.<br /><br />
              Cordialement <br />
              <img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/signature.png" width="212" height="61" alt="Mathieu LEBERT" border="0"/><br/>
              Administrateur du site
            </p>
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="center">
            <table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
              <tr>
                <td bgcolor="#3fb618" width="250" height="60" align="center" valign="middle"><a href="https://www.s1biose.com/node/139" target="_blank" style="width: 250; display: block; text-decoration: none; border: 0; text-align: center; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; background:#3fb618;">Ça m'intéresse</a>
                </td>
              </tr>
              <tr>
                <td bgcolor="#ffffff" align="center" height="50" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td bgcolor="#3fb618" align="center" valign="top" style="font-size:14px;">
            <table bgcolor="#3fb618" width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td bgcolor="#3fb618" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;"><font style="font-size: 13px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-align: center;">
                  S1BIOSE, 5 le clos de la Cramière, 61430 Athis Val de Rouvre <br/>
                  <a href="tel:0768805052" target="_blank" style="text-decoration: none; color: #ffffff;">tel : 07 68 80 50 52</a><br />
                  <a href="mailto:contact@s1biose.com" target="_blank" style="text-decoration: none; color: #ffffff;">contact@s1biose.com</a></font>
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" height="10" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;">
                  <table width="250" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="50" align="center"><a href="https://www.facebook.com/S1biosecom" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_facebook.png" alt="Facebook" width="32" height="32" border="0"/></a>
                      </td>
                      <td width="50" align="center"><a href="https://twitter.com/S1biosecom" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_twitter.png" alt="Twitter" width="32" height="32" border="0"/></a>
                      </td>
                      <td width="50" align="center"><a href="https://plus.google.com/109340539723554321241" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_google_plus.png" alt="Google+" width="32" height="32" border="0"/></a>
                      </td>
                      <td width="50" align="center"><a href="https://www.pinterest.fr/S1biosecom/pins/" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_pinterest.png" alt="Pinterest" width="32" height="32" border="0"/></a>
                      </td>
                      <td width="50" align="center"><a href="https://www.youtube.com/channel/UCClgO9z4XrjrGx7FD0YIBng/featured" target="_blank"><img src="https://s1biose.com/themes/contrib/bootstrap_subtheme_front_office/images/logo_youtube.png" alt="YouTube" width="32" height="32" border="0"/></a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" height="10" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" style="padding-top: 0; padding-bottom: 0; padding-right: 10px; padding-left: 10px;"><font style="font-size: 13px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; text-align: center;">Copyright © 2017 <a href="https://www.s1biose.com" target="_blank" style="text-decoration: none; color: #ffffff;">s1biose.com</a> - Tous droits réservés.</font>
                </td>
              </tr>
              <tr>
                <td bgcolor="#3fb618" align="center" height="20" style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0;">&nbsp;
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td bgcolor="#3fb618" height="6" style="width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
          </td>
        </tr>
        <tr>
          <td>&nbsp;
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </center>
  </body>
</html>

这是一个小提琴：https://jsfiddle.net/4cwpby0v/

【讨论】：