发表新帖
发表新帖

HTML email in Gmail - CSS style attribute removed

前端 未结
关注
6 1486
慢半拍i
慢半拍i 2020-12-05 10:31

I\'m working on an HTML email and I am using MailChimp\'s Responsive Email Templates in combination with their CSS inliner tool. For the most part, the email looks great acr

相关标签:
6条回答
  • 广开言路
    2020-12-05 10:44

    As someone who regularly codes emails for marketing campaigns at my job, I feel your pain. Gmail, along with many other email clients, can be a bit funky to code for. For one, it strips out any CSS that's outside the body. So putting in things like media queries and document level styles don't work. The best piece of advice I can give you is hand code your inline CSS and try to avoid anything fancy. In fact, if you can use an HTML attribute to do your styling, use that in place of any CSS. An example would be bgcolor instead of background-color.

    Here is an article related to your specific problem I found. Best of luck.

    0 讨论(0)
  • 温柔的废话
    2020-12-05 10:52

    I just checked now: Gmail strips out your inline style attribute if you don't put spaces between ; , , and : chars

    this works fine:

    <span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span>

    but the same rule will be stripped out if you don't use spaces; if you write this:

    <span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span>

    you will get this output on Gmail client:

    <span>text</span>

    EDIT:

    In addition to this behavior, I noticed that Gmail tends to strip out the inline style if you declare a font-family inside a nested <table> or a <td>, I'm still not sure on what is the general rule of its preprocessor, I checked on Google but I can't find any official documentation about html mail composition for Gmail.

    0 讨论(0)
  • 醉话见心
    2020-12-05 10:52

    Check your CSS for typos

    The reason that Gmail strips certain styles might have changed since the OP in 2011, but here's what I discovered in 2020...

    In a <style> block in the <head> of my email I had a typo that was essentially (note the "d"):

    .link {
  text-decoration: underline;d
}

    Inspecting the email, I could see that the rule was there (along with everything else) in the <style> block. However, every place I had used that class in the email had been stripped out by Gmail. So <p class="link"> ... </p> magically became <p> ... </p>.

    In addition, all rules declared under .link { ... } were also stripped from the HTML document. So - in the example below - class="small" would work, but class="link" and class="headline" would be stripped from the HTML.

    <style>
  .small {
    font-size: 12px;
  }
  .link {
    text-decoration: underline;d
  }
  .headline {
    font-size: 18px;
  }
</style>
    0 讨论(0)
  • 無奈伤痛
    2020-12-05 10:59

    There are multiple work arounds for gmail. Gmail is quite a joker when it comes to your styling, as it'll strip what it doesn't like completely out of your e-mail.

    Here are some little tips:

    Gmail adds white space between images, or stretched the size of it's container td: You can correct this by specifying style="display:block" on your images (Make sure your TD has the same width and/or height as your image).

    Gmail renders black links as blue links: Yes, this is ugly. Use #000001 instead of #000000.

    Gmail makes phone numbers clickable: That may be a good thing or not, depending on your client, but one way to work around that is to include an empty anchor tag with styles around the phone number.

    Ex: <a style="color:#000001; text-decoration:none;>555 555-5555</a>. It will make you feel ashamed of your code, but it's an effective little hack.

    0 讨论(0)
  • 情深已故
    2020-12-05 11:00

    Just thought I'd add this in to the mix. I encountered as this problem as well and when looking at the raw source I realized that the 8-bit encoding was splitting lines in odd places due to the 1000 character limit, so I was ending up with content like this:

    <td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty
 le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">

    Solution is to base64 encode the content and use chunk split or whatever tools you have to accomplish the same.

    In php I did $html = chunk_split(base64_encode($html)) and then set Content-Transfer-Encoding: base64. Now gmail loves me.

    0 讨论(0)
  • 梦如初夏
    2020-12-05 11:01

    Using CSS selectors is another workaround that I was able to use. In my example I am trying to format a HTML table. I found gmail stripped out all the ID and CLASS attributes rendering my CSS useless.

    After some investigation I noticed gmail did not remove my title attribute. So I created a CSS rule using a title selector. This appeares to work fine:

    [title~=myTitle] {background: black; color: white;}

    I don't think this is best practice, but I thought I would mention it.

    0 讨论(0)
 看不清?
提交回复
热议问题