Gmail – Different HTML formatting in Gmail vs. Inbox

gmailinbox-by-gmail

I just noticed that Inbox appears to format an HTML message differently than it is formatted in Gmail. For example, in Gmail the message is formatted properly and displays all HTML elements like this:
enter image description here

But in Inbox-by-Gmail the same message is formatted like this:

enter image description here

It appears that what is happening is that some of the CSS is being stripped out by Inbox-by-Gmail for some reason.

Does anyone know why this is the case? I would like Inbox to format this HTML message the same way that Gmail does. Any ideas?

Best Answer

In short, no, there is no practical way to force the same formatting between Inbox-by-Gmail and Gmail even for the same email message. Here is why: a. Gmail pre-processes messages and embeds them in very different HTML structures between the two products, b. it defines and uses different styles (defined in the HTML Head section between the Style open and close tags), c. Inbox adds the .gmail_msg class to table, tbody, tr, and td html tags.

Using the F12 developer tool I opened the same email in the two readers and inspected the HTML and CSS. They are very different. While tables in both tools start with the user agent CSS for tables, everything else is different (the styles defined in the head section, the html structures which affect CSS inheritance, and the usage of the .gmail_msg in Inbox. This can affect each email differently depending on the exact tags, attributes, and presence of inline styles in the email.