本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
6、字體樣式(font style/weight/size/variant)
YUI里，分成了多條：
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
Eric則在他最終版的reset中去掉了關(guān)于這些的樣式重置，只保留了
font-size: 100%;
理由見下文。
但通常情況下，我認(rèn)為還是重置一下這些樣式好，比如strong元素，很多時(shí)候只是語義而已，并非希望他真的加粗?？赡軙斜尘吧蛘咂渌绞絹韽?qiáng)調(diào)。而之所以這里都用了inherit這個(gè)繼承屬性而不是定義
font-weight: normal;
可以在 Eric 先前的reset文章 中看到。這是為了防止——父元素字體加粗了，而沒有一個(gè)子元素繼承加粗屬性（因?yàn)樵O(shè)置了normal）——這種情況的發(fā)生。所以把YUI中設(shè)置h1-h6的樣式以及abbr和acronym的兩句樣式都改成inherit會比較好。
此外，對于h1-h6的字體大小定義，建議放到專門的typography.css里，不建議放在reset.css里。所以這里我同樣傾向于用YUI的策略，全部重置。
但是很不幸，在ie6/ie7當(dāng)中，不論是strong還是h1-h6,亦或是em等元素，設(shè)置了inherit均無法繼承父元素屬性，依然保持自己的特色。這就帶來了瀏覽器差異，樣式重置本身是為了避免瀏覽器差異的，但現(xiàn)在帶來了瀏覽器差異，是萬萬不可取的。對于這個(gè)問題我考慮了很久，到底是為了統(tǒng)一所有瀏覽器都重置成normal（YUI的想法），還是放棄重置這些元素，讓他們順其自然，來保證在所有瀏覽器中樣式一樣（Eric的想法）。我最后決定采用YUI的做法。因?yàn)椋瑹o論重置成normal還是不重置，這些元素都無法繼承父元素屬性。既然如此，那么退而求其次，保證這些元素都恢復(fù)到普通外觀，避免在設(shè)計(jì)的時(shí)候還要重置樣式。
不得不說，這種妥協(xié)是僅僅針對IE6和IE7的，也許在5年后，老板和客戶都不要求支持IE7的時(shí)候，我們可以放心大膽得使用inherit了。
此外，YUI并沒有給code kbd samp tt 這幾個(gè)元素重置字體大小。但實(shí)際上在IE中，他們都會被縮小顯示。所以此處應(yīng)當(dāng)給予重置font-size: 100%;
7、行高(line-height)
對于行高，YUI并沒有給出重置定義，而Eric則給出了重置：
body {
line-height: 1;
}
行高默認(rèn)所有元素都會繼承的，所以給body設(shè)置行高為1就足夠了。通常行高設(shè)為1時(shí)候，英文照常閱讀，但中文就無法閱讀了，行間距過于緊密導(dǎo)致容易看錯(cuò)行。通常在中文環(huán)境下得設(shè)置1.4到1.5才能是用戶正常閱讀。我建議是1.5，這樣算出來的值也是整數(shù)。比如字體大小12px的時(shí)候行高是18px，字體大小16px時(shí)行高24px?？雌饋硪矔容^舒服。此外，還有一個(gè)不設(shè)置成1的重要原因是：IE下，行高為1時(shí)，中文字頂部會被削掉幾像素，字體加粗時(shí)尤為明顯。所以，重置的原則是好的，但切不可重置為1。

最新評論