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

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设置，可以影响这个太，我认为。例如，某些版本的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; 
}