css补充学习（关于浏览器兼容问题）

2016-09-01 本文已影响39人熊孩子CEO

原理：iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

功能：text-size-adjust 设为none或者100%关闭字体大小自动调整功能.

:focus 选择器用于选取获得焦点的元素。所有主流浏览器都支持 :focus 选择器。

注释：如果 :focus 用于 IE8 ，则必须声明。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

3.audio:not([controls]) {display: none;height: 0}

功能：audio:not([controls]){display:none;/*为防止在主流浏览器中出现“不带控制按钮的音频模块”这一问题。*/

功能：height:0;/*解决iOS5移动端显示多余高度的兼容性问题。 */}

4.box-sizing属性可以为三个值之一：content-box（default），border-box

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

5.white-space 属性设置如何处理元素内的空白。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

normal默认。空白会被浏览器忽略。

normal默认。空白会被浏览器忽略。

pre空白会被浏览器保留。

nowrap文本不会换行，文本会在在同一行上继续，直到遇到<-br->

pre-wrap保留空白符序列，但是正常地进行换行。

pre-line合并空白符序列，但是保留换行符。

inherit规定应该从父元素继承 white-space 属性的值。

囧：这些不经常用，今天才刚刚知道。。。。