normalize.css分析

本文主要获取网上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分析

深入理解line-height

5、::-moz-focus-inner

Firefox中，按钮可以通过::-moz-focus-inner获取到按钮content内容所在区域。::-moz-focus-inner伪元素主要针对按钮类型的元素，包括button类型, reset类型以及submit类型。如果给这个伪类设置边框颜色，按钮会一直保留颜色，而不仅仅是:focus状态的时候。

::-moz-focus-inner可以解决：1）通过行高居中按钮文字时，发现文字偏下 2）点击按钮的时候按钮出现虚线框。