问题:

From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work.

However, I'm struggling with the CSS positioning property. I want an image to sit on top of a background image so I set the parent div of both to position: relative and the image to absolute. However, for some reason Gmail removes the style attribute that declares the position: relative from the div. It keeps all other inline CSS though.

Any idea? Any workaround?

回答1:

Sadly, I suspect you may have to abandon your perfectly reasonable ideas of divs and positioning when designing for email. CSS support in email clients is a tangled nightmare.

The only (relatively) surefire way of forcing layout on email is to go with an old school tables layout, which is unfortunate, but unavoidable.

Campaign Monitor has an excellent summary of email client CSS support here.

回答2:

I experienced similar layout problems when sending email newsletters. The solution was to use tables to position things properly. It's dated, but I think it was the only way to make things look the way they should.