【CSS3】特殊的属性归纳（一）
-webkit- 最终要用兼容性写法
（一）-webkit-tap-highlight-color （mobile移动设备私有属性）
案列：
问题：遇到a链接和button未加事件在手机端点击仍有 点击效果，这时给它们都加属性disabled也没用。（我的手机型号是iphone5s）
解决：
清除默认效果
a,button{
-webkit-tap-highlight-color:rgba(255,0,0,0);
}
搜索时发现这个属性是有一定限制的（博友的笔记）
属性理解：
//webkit是iphone浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节
该属性只用于 iOS (iPhone和iPad)。当点击一个链接或者由Javascript定义的可点击元素时，移动设备对应区域就会出现一个半透明的灰色背景。
此时 重设-webkit-tap-highlight-color属性 为任何颜色；若想禁用这个高亮效果，设置颜色的透明度alpha值为0即可。如上案例。
原理：
mobile移动端，有事件监听的元素被点击时会被高亮显示 。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击元素时，设置-webkit-tap-highlight-color属性就能覆盖默认显示的高亮颜色。 （该属性可只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。）
（二）-webkit-text-size-adjust
该属性本职用于mobile移动端。现在的桌面版webkit浏览器支持是因为Bug：Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS，该bug在最新版的WebKit Nightly Builds 里已被修复。
属性理解：
该属性用于处理 iPhone 在竖屏转横屏时的文字放大( !!! 即使在viewport设置了maximumscale=1.0横屏时文字还是会放大 )。
该属性支持百分比写法（在mobile移动端中）。
一些区别：
iOS 系统 iPhone和iPad的该属性-webkit-text-size-adjust的默认值是不同的。
iPhone： -webkit-text-size-adjust:auto;
iPad ： -webkit-text-size-adjust:none; （iPad默认不调节）
案例：
1 ) 禁止iPhone横竖屏切换时调节文字，设置-webkit-text-size-adjust:100% ( !!! 不能设置-webkit-text-size-adjust:none;因为会导致桌面版webkit浏览器无法人为更改文字大小)
2 ) 解决chrome不支持字体小于12px，避开1)!!! 的部分。方法如下
方法① 主要核心步骤代码
var isChrome=!!window.chrome; // js判断是否为chrome (区分Safari和chrome的css hack还未知)
font-size:12px;-webkit-transform:scale( 0.8 ); *font-size:10px; //如需要展示10px的字号，css设置如左侧。搭配使用，利用scale缩小到合适值(注意scale若写在父级有背景会同样影响) (*font-size:10px兼容ie，ie是支持12px字号及以下的)
方法②
html{ -webkit-text-size-adjust:none; } //该属性值不可为 inherit 或 initial
注意：定义的是html该属性，不能定义在body上，直接定义在body上会导致页面缩放失效。以上写法 body会继承html的样式
（三）outline —— css轮廓
outline: outline-color outline-style outline-width | inherit ;
CSS3新增属性 outline-offset: length|inherit;
当设置 outline:none; 轮廓不出现
案例：
1 ) 解决ie下点击a标签出现的虚线，web端设置 outline:none; ( !!! ie7及以下不识别该属性，添加a标签属性 hidefocus="true" )
2 ) 去除chrome默认的文本框聚焦时 边框的样式，设置 input,textarea{ outline:none; }
（四）-webkit-appearance
属性理解：
-webkit-appearance用于 改变 按钮和其他控件 的外观，属性值归纳页
案例：
1 ) 解决 iOS下无法正常渲染按钮，设置 button{ -webkit-appearance:none; } （问题原因:iOS的Safari有默认的按钮样式，如下图）
2 ) web端 去除输入框、文本框、按钮默认样式，设置 input[type="text"],input[type="button"],textarea,button{ -webkit-appearance:none; } (移动端不起作用)
注意： input标签的type类型为radio、checkbox等设置该属性 -webkit-appearance:none;会导致该类型标签消失
（五）-webkit-user-select
-webkit-user-select: text | none | all | element;
- text – 可以选择文本
- element – 可以选择文本，但选择范围受元素边界的约束
- none – 不可以选择文本
- auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。
属性理解：
-webkit-user-select 控制网页内容的选择范围，用于 用户复制、选择 页面文字的权限。
此属性不继承，一般设置body上规定整个body的文字都不会自动调整。 body{ -webkit-user-select:none; }
案例：
1 ) 禁止用户操作页面文字，设置 -webkit-user-select:none;
2 ） 解决一些 ios系统 某元素设置 -webkit-user-select:text 却无法选中的bug，步骤
①去掉body设置的 -webkit-touch-callout:none;
② 该元素的父元素也添加属性 -webkit-user-select:text
（六）-webkit-touch-callout （mobile移动设备私有属性）
当触摸并按住触摸目标时，禁止或显示系统默认菜单。
-webkit-touch-callout: default | none;
- default – 显示默认的callout
- none– 禁用callout
属性理解：
在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
案例：
1）禁止长按弹出的菜单
eg：微信浏览器 若有js点击事件，长按会弹出一个js提示的菜单栏，有打开和取消俩个选项。
① iOS取消以上默认事件，设置 父元素-webkit-touch-callout:none; 属性来禁止这个菜单的弹出
② 安卓取消以上默认事件，使用h5提出的 contextmenu事件 阻止默认行为 （安卓不支持该css3属性）
$(document).bind('contextmenu',function(e){
e.preventDefault();
})
（1111）webkit内核的浏览器常见8种有：
①Google Chrome (谷歌浏览器 )
②Safari （苹果浏览器）
③搜狗高速浏览器
④遨游浏览器3
⑤QQ浏览器
⑥360极速浏览器
⑦世界之窗浏览器(极速版)
⑧阿里云浏览器
附加一个浏览器引擎整理的随笔
