如何更正瀏覽器之間的不同字體大小

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