CSS Styling won't work in outlook 2010?

问题:

If I use styling in my outlook, it won't work.

how can I fix it? I am talking about this style code:

<div id="BodyID" Style=" word-spacing:2px;  min-width:0px; min-height:0px;max-width:693px; max-height:490px;  height:485px; background-color:#f4f4f4; border:1px solid #e4e4e4; font-family:Arial;">

回答1:

Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.

Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.

回答2:

Maybe this can help http://www.campaignmonitor.com/css/ It's a table, what is supported in E-Mails

---

edit
min|max-width|height not supported

回答3:

http://htmlemailboilerplate.com/

I've been using that as a base for my HTML email campaigns.

And the link yunzen posted to campaign monitor is a great resource.

回答4:

The MSDN article superlime linked to tells the sad story: for whatever incomprehensible reasons, Microsoft reverted nearly 10 years in their handling of HTML email w/Outlook2007, and did not see fit to fix it in 2010.

Having taken the trouble to design a well-formatted HTML layout for rest of the universe of mail user agents, I do see one saving workaround, which is what I'm going to direct my users to, rather than spend my time trying to reconstruct ancient HTML:

Use the VIEW IN BROWSER option Outlook offers for reading an email message. That re-assembles the HTML as intended.

回答5:

Try adding 3 columns table, click on the example link below.

Example: Link

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="400">
            <table border="1" cellspacing="0" width="100%">
                <tr>
                    <td>
                        Content here...
                    </td>
                </tr>
            </table>
        </td>
         <td></td>
     </tr>
</table>