最近在被各種瀏覽器的CSS兼容折磨，所以看了看normalize的源代碼來了解一些常見的瀏覽器間不一致的CSS渲染問題……
源代碼在這里
text-size-adjust
iOS設備旋轉后可能會自動調整字體大小（e.g. 豎着的時候是14px，橫着就自動調整成20px）。將這個屬性設置為100%后Safari就會不會自作主張調整大小。
設置成100%和設置成none的區別是前者在防止瀏覽器自動插手字體大小的同時，可以讓用戶通過縮放控制字體大小，后者會很惱人地讓用戶無法放大縮小字體。MDN的文檔里有提到如果將這個屬性設為none，基於webkit的電腦瀏覽器也會受到影響，無法放大縮小。以前有人利用這個特性來繞過電腦chrome字體大小不能小於12px的限制，但是chrome27后已經取消了對這個特性的支持。不過一般說來，還是不要設none的好，多少讓用戶有點自由控制的余地。
display: block
為低版本的IE們補充一些HTML5元素的正確顯示方法
- IE8不認識HTML5的新元素
- beta版的IE9認識新元素，但沒有定義正確的顯示
- IE10/11的
details和summary不是block-level - IE11的
main不是block-level - Chrome, Firefox, 和Opera的progress沒有以baseline垂直對齊
audio:not([controls])
這個略狠，沒有控件的audio不給顯示= =
display:none
IE不支持hidden屬性，需要手動給帶hidden的元素加上display:none。另外template也應該補上隱藏。
注意hidden是用來隱藏無論何時都不該出現的元素的參見W3C的文檔，如果只是暫時隱藏，用CSS的display:none即可，不要用HTML的hidden。
超鏈接
IE10會在a被按下的時候加上灰色背景，需要重設為transparent
outline: 0
清除超鏈接懸停或者按下時出現的黑色虛線框，注意這里其實是為了好看犧牲了頁面的accessibility，參見CSS outline property - outline: none and outline: 0，像reset.css里這部分就有提醒需要重新定義。
abbr
IE，Safari和Chrome沒有給abbr下划線，按照標准是要的
b, strong
Firefox 4+, Safari和Chrome給b和strong設置的其實是bolder而不是bold，對於一些有一整套web font的網站會落到不想要的字重。但是HTML標准里已經說了要bolder啊2333 而且設為bold的話是不能疊加着越來越粗的……所以這條在用的時候可能需要自己override = =
dfn
Safari和Chrome里不是斜體
h1
部分版本的Firefox、Chrome和Safari下section和aside里的h1的font-size和margin不一致
small
不同瀏覽器下的small大小不一致，這里定為80%
sub, sup
HTML標准里對small，sub和sup的大小要求都是smaller，但是normalize.css給small設的是80%，sub和sup卻是75%……= = 另外標准里要求
sub { vertical-align: sub; } sup { vertical-align: super; } sub, sup { line-height: normal; font-size: smaller; }
這里為了保持一致+不影響其他元素的行高，把兩者的line-height設為0，vertical-align從baseline開始，然后用top和bottom手動設置兩者偏移量。
img
IE8/9/10在img被a包裹的時候會加上丑的一比的邊框，為了保持一致要去掉
figure
IE8/9和Safari沒有對figure加上margin
hr
Firefox的hr用的是border-box（border和padding算在height里），IE附體……為了保持一致，設為content-box
form
Chrome和OS X的Safari在select沒有設置border的時候一些樣式不起作用。
pre
大部分瀏覽器的pre在overflow的時候會直接溢出去，這里加上overflow:auto讓它出現滾動條（咦好像標准里沒有說要這樣也……）
form controls
- 在很多瀏覽器里控件都沒有正確繼承樣式，比如給form設置了字體和顏色之后，控件還是我行我素的黑色+默認字體，所以這里直接設了inherit。啊可以和固執地使用中易宋體/微軟雅黑的控件們說拜拜啦~ 另外不同的瀏覽器會自動給控件加上不同的margin，這里保持一致全部設成0。
- IE里的button默認的overflow是hidden，這里設為和群眾一致的visible
- 給按鈕們都加上了cursor: pointer……標准里沒有不過加上去也很合理=。= 然后給disabled的再補充一個cursor:default
-
不同的瀏覽器給按鈕們設了不同的padding和border（這方面的瀏覽器不一致性比其他地方多得多啊=。=）
左為Chrome，右為firefox。同樣的按鈕（設了一樣的字體）能差這么遠我也是醉了……
- fieldset和legend的border和padding什么的直接明寫一個，各瀏覽器也是差太多……
textarea
IE里的文本框就算文本高度沒有超過指定高度，都會默認加上一個沒有滾動條的滾動欄，設置overflow: auto可以去掉