normalize.css閱讀筆記

最近在被各類瀏覽器的CSS兼容折磨，因此看了看normalize的源代碼來了解一些常見的瀏覽器間不一致的CSS渲染問題……

源代碼在這裏

text-size-adjust

用法參見Apple的文檔和MDN的文檔

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能夠去掉