如何更正浏览器之间的不同字体大小

Question

我正在开发一个网站，我注意到IE和其他浏览器之间的字体大小存在大差异。这是我的页面的一个例子：

我将它设计成看起来像第一张和第二张图片，但它在IE上看起来如何打破了我的设计。我该如何解决这个问题？

Answer 1

确保使用某种CSS重置。所有浏览器都有他们的怪癖。通过使用CSS重置，您可以将其标准化。这是一个很好的：

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

希望有所帮助。

鲍勃

Answer 2

尝试使用类似http://www.blueprintcss.org/

中的重置块

或者，

body { font-size: 67.5% }

Answer 3

我认为还有各种各样的窗口设置可以影响这一点。例如某些版本的Windows（可能是所有版本，我不确定）具有使用大字体的辅助功能。如果我没记错的话，这将会使浏览器字体大小增加25％，实际上忽略了任何指定的字体大小。当我遇到这个问题时，我实际上不得不打开设置然后再关闭，因为它似乎陷入了中途阶段。

您还可以检查以确保您没有更改浏览器设置以使用更大的字体或类似的东西，但我认为样式表可能能够稍微覆盖这些设置。

Answer 4

每个浏览器都有自己的默认样式，因此标题，正文等的默认字体大小会有所不同。我们通常在应用自己的自定义设置之前重置所有浏览器默认设置在这里，我粘贴了我们通常使用的重置文件的内容：

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;
}