问题
I am trying to send an email with html content but I am observing displaying issues. The following does not get displayed properly in width by Microsoft Office Outlook, any hint?
<div style="width: 650px; border: 1px solid blue">hello</div>
回答1:
use tables, and on <td> use width="" propery and also style="width:" ... for some clients are reading the width property and others reads the style property
回答2:
You must reconsider to change the email template to be tables within table and with inline styling
here is a sub link to problem which you may encounter
How to align several tables in td in center
回答3:
HTML divs and spans don't work particuarly well in office outlook. You are better off using tables for this display. Reference: "...The best way to combat these issues would be to use a table-based layout." https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients
Here is some further information taken from another answer:
"- JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to. - Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
There are loads of answers on SO, and lots of other links on the internet at large.
- http://www.emailology.org/
- http://www.email-standards.org/
- http://www.campaignmonitor.com/css/
- http://www.getfractal.com/ [DISCLOSURE - I used to work at Fractal.]"
Reference: Has anyone gotten HTML emails working with Twitter Bootstrap?
来源：https://stackoverflow.com/questions/27441328/div-width-incorrect-in-office-outlook-client