本文主要获取网上normalize.css的v8.0.0版本,记录自己对设置样式的理解
可以在github上下载normalize.css文件:https://github.com/necolas/normalize.css/releases
1、-webkit-text-size-adjust属性
该属性最先是由 iOS 1.0 引入的,所以本来就是解决移动设备上的问题而出现的。通常 iPhone(iOS4)横屏时,「-webkit-text-size- adjust」 的值约为140%。
原本webkit桌面版浏览器支持-webkit-text-size-adjust,但是从chrome27之后桌面版开始取消这个属性。因为这个属性会网页缩放的时候没有办法设置大小不能改变,可用性大大降低,特别是对于有视觉障碍的用户。所以如果想取消字号变大,正确的用法应该是:「-webkit-text-size-adjust:100%;」或者「-webkit-text-size-adjust:none;」。
详细可查看网页字体缩放样式-webkit-text-size-adjust的用法详解。
2、长度单位改为em
便于自适应布局。元素font-size单位设置为em,能根据父元素font-size来设置;元素其他属性长度单位设置为em,能根据自身的font-size值设置。
3、hr的修改
不明白原因。待日后查明。
先附上hr的兼容性问题资料关于hr标记在各浏览器中的问题说明。
4、line-height
我们来分析下sup,sub的line-height设置为0的原因。
行框是由该行的所有行内元素的内联框决定的。
行框的上边界由最高的内联框决定,下边界由最低的内联框决定。因此sup、sub会影响到所在行的行高。
line box,inline box及vertical-align分析
Firefox中,按钮可以通过::-moz-focus-inner获取到按钮content内容所在区域。::-moz-focus-inner伪元素主要针对按钮类型的元素,包括button类型, reset类型以及submit类型。如果给这个伪类设置边框颜色,按钮会一直保留颜色,而不仅仅是:focus状态的时候。
::-moz-focus-inner可以解决:1)通过行高居中按钮文字时,发现文字偏下 2)点击按钮的时候按钮出现虚线框。