Gmail - HTML classes and style tags are removed inside table

久未见 提交于 2020-06-29 03:54:05

问题


My email template has classes for html elements and also style tag added inside table. And the CSS customization for the table is done using class selectors.

When tested in Gmail web version the styles are not applied also the classes and styles are not available in the rendered DOM. (It works fine in outlook though)

Is there a documentation from Google that they will strip off html classes and style tags?

Also if this is the case with Gmail please suggest any alternate solution. Please don't suggest inline css as we use jsp template and the contents are rendered dynamically.

Sample html template:

<table class="layoutTable">
   <tbody>
      <tr>
         <td class="layoutLeft" rowspan="3"></td>
         <td class="layoutTop"></td>
         <td class="layoutRight" rowspan="3"></td>
      </tr>
      <tr>
         <td class="layoutBody">
            <style type="text/css">BODY {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               TEXTAREA {
               FONT-SIZE: 70%; FONT-FAMILY: inherit; COLOR: #000000
               }
               BODY {
               FONT-SIZE: 14px; FONT-FAMILY: "Helvetica", Arial, sans-serif; PADDING-BOTTOM: 0px; TEXT-ALIGN: left; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #f8f8f8
               }
            </style>
            <table class="tableEmailText" cellspacing="0" cellpadding="0" border="0">
               <tbody>
                  <tr>
    
    

Rendered DOM in Gmail:

<table>
   <tbody>
      <tr>
         <td rowspan="3">
         </td>
         <td>
         </td>
         <td rowspan="3">
         </td>
      </tr>
      <tr>
         <td>
            <table border="0" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <th>

回答1:


There are different versions of Gmail, but yes it is common to see it strip embedded CSS. You must refactor your code to inline the styles. See HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails? or Styles not working in Gmail



来源:https://stackoverflow.com/questions/62303312/gmail-html-classes-and-style-tags-are-removed-inside-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!