Outlook rendering problem, rendering text too larg

问题:

I'm trying to create a newsletter standard for our org and having problems with Outlook rendering the text too large.

Here is the css section of the page

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
    background: url(http://www.blah.com/stuff.gif);
    }
a {
    color: #f24c22 !important;
    }
a:visited {
    color: #f24c22 !important;
    }
a:hover {
    color: #3d7ac5 !important;
    }
table {
    background: #ffffff;
    }
h1 {
    font-size: 1.3em;
    }
h2 {
    font-size: 1.2em;
    color: #494949;
    padding-top: 0 !important;
    margin-top: 0 !important;
    }
h3 {
    font-size: 1.1em;
    color: #12377c;
    }
p {
    padding-top: 0 !important;
    margin-top: 0 !important; 
    color:#333333;
    }
   .style1 {color: #333333}
   .style2 {color: #12377c}
   .style3 {
       font-size: smaller;
       color: #666666;
   }

Any suggestions why this might be caused?

回答1:

Have you tryed using main *{font-size: 12pt;} ?

Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007, and people hate it.

Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute.

回答2:

If you want to set a specific size for you fonts, then you should probably use a fixed size type like pt. Rather than a variable one like em/%

See here for what I mean.

回答3:

Many mail readers strip the "body" tag from any email received, or disregard styles applied to this element. Try applying the font size to an enclosing div.

回答4:

abstracted the font size to smaller, which I found at standard viewing to be the equivalent size. Rewrite page in div's considering it's a basic template, refered to the ID's of the divs in order to render, worked fine. Tested it on various email accounts including gmail, hotmail and rendered through outlook. Outlook was the only problematic one, where the same page refferencial links fail.

回答5:

Add these metatags and you will find that Word / Outlook "magically" renders the page (including images) the correct size:

<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />

I have no idea why Outlook does this, most corporate emails I get look terrible in Outlook - however, with these tags, the ones I send look pristine.