How to correct differing font sizes between browsers

I'm developing a web site开发者_JAVA百科 and I notice that there is a big difference in font size between IE and other browsers. This is an example of my page:

I design it to look like the first and the second image, but how it looks on IE breaks my design. How can I solve this?

Be sure you are using a CSS reset of some sort. All browsers have their quirks. By using a CSS reset, you normalize that a bit. Here is a good one:

http://meyerweb.com/eric/tools/css/reset/

Hope that helps.

Bob

Try using a reset block like the one from http://www.blueprintcss.org/

Or,

body { font-size: 67.5% }

There are various windows settings that can affect this too I think. For example some versions of windows (maybe all versions, I'm not sure) have an accessibility feature of using large fonts. This will, if I remember correctly, increase browser font sizes by 25% as well, effectively ignoring any specified font sizes. When I was suffering from this problem I actually had to turn the setting on and then off again since it seemed to have got stuck in a half way phase.

You can also check to make sure that you haven't changed the browser settings to use larger fonts or anything like that though I think that stylesheets might be able to override these settings a bit.

Each browser has their own default styles and therefore the default font size to headers, body etc will vary. We usually reset all browsers default settings before applying our own custom settings. Here I've pasted the content of the reset file we generally use:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size:100%;
    font-family: inherit;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6
{
    padding: .6em 0;
    margin: 0;
    font-size: 100%;
}
ol, ul
{
    list-style: none;
}
table
{
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td
{
    text-align: left;
    font-weight: normal;
}