最近在被各种浏览器的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:noneIE不支持hidden属性,需要手动给带hidden的元素加上display:none。另外template也应该补上隐藏。
注意hidden是用来隐藏无论何时都不该出现的元素的,如果只是暂时隐藏,用CSS的display:none即可,不要用HTML的hidden。
超链接IE10会在a被按下的时候加上灰色背景,需要重设为transparent
outline: 0清除超链接悬停或者按下时出现的黑色虚线框,注意这里其实是为了好看牺牲了页面的accessibility,参见CSS outline property - outline: none and outline: 0,像reset.css里这部分就有提醒需要重新定义。
abbrIE,Safari和Chrome没有给abbr下划线,按照标准是要的
b, strongFirefox 4+, Safari和Chrome给b和strong设置的其实是bolder而不是bold,对于一些有一整套web font的网站会落到不想要的字重。但是里已经说了要bolder啊2333 而且设为bold的话是不能叠加着越来越粗的……所以这条在用的时候可能需要自己override = =
dfnSafari和Chrome里不是斜体
h1部分版本的Firefox、Chrome和Safari下section和aside里的h1的font-size和margin不一致
small不同浏览器下的small大小不一致,这里定为80%
sub, sup里对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; }