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是用来隐藏无论何时都不该出现的元素的,如果只是暂时隐藏,用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的网站会落到不想要的字重。但是里已经说了要bolder啊2333 而且设为bold的话是不能叠加着越来越粗的……所以这条在用的时候可能需要自己override = =

dfn

Safari和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; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxpsx.html