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