Gmail Android & iOS App. CSS styles (td and p elements) not working when sending from MS Outlook

前端未结

关注

 3  1163

I\'m sending an email from MS Outlook (2013) and it\'s working perfectly, but in the GMail app for Android (it also happens for iOS) there is a gap between lines (rows).

相关标签:

3条回答

既然无缘

2021-01-17 04:08
This is the best I can get and I will follow this approach unless someone comes up with a better solution:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gmail APP issue</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        td p.MsoNormal {margin: 0.1px}
    </style>

</head>
<body>  
    <table style="border:0px;border-spacing:0px;border-collapse:collapse;">
        <tbody>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 1</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class="MsoNormal">TABLE CELL 2</p>
                </td>
            </tr>
        </tbody>
    </table>  

</body>
</html>
```
What we are doing is removing the inline style from the p element, adding the MsoNormal class and applying the margin in the <style> tag.

MS Outlook will take that margin and will inline it in the <p> element, so Gmail / Gmail app will finally receive the margin set :)

Notice that we are setting a 0.1px margin, otherwise Outlook won't inline it in the <p> element.

Remember that some email clients don't recognize the style tag and some others don't apply the css from classes, so we should set margin: 0.1px in the p element as an inline style
0 讨论(0)
发布评论:

提交评论
- 加载中...
陌清茗

2021-01-17 04:23
I managed to change this situation by changing the MsoNormal class
```
<style>
    td p.MsoNormal {margin: -4px !important}

    /* ou */

    .MsoNormal {
        margin: -4px !important;
    }
  </style>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
渐次进展

2021-01-17 04:26
You already identified your problem, the reason behind your problem and a solution, which is stop using Outlook to send emails. Use a service or a software program that doesn't alter your code when you do a send.

Outlook, Gmail and just about every single email client will change your code when it renders it. Outlook will strip out things that don't work in Outlook. The same with Gmail. The best known example of this is how Gmail will strip out a <style> sheet when it runs across an incompatible CSS value. You can use a service like Putsmail to test your work to see if the issue is Outlook or an issue with formatting.

If you are going to continue to pursue this path of frustration, at least use a properly formatted <table>.
```
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td>
      <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
    </td>
    <tr>
      <td>
        <p style="margin:0;">THIS CELL (TD) HAS TOP AND BOTTOM EXTRA SPACE WHEN RECEIVING FROM MS OUTLOOK</p>
      </td>
    </tr>
</table>  
```
I use this same table structure without fail to successfully send emails.

Good luck.
- https://putsmail.com
0 讨论(0)
发布评论:

提交评论
- 加载中...