移动端开发样式CSS Hack和一些问题的处理

隐藏滚动条

::-webkit-scrollbar {

width: 0;

height: 0;

}   

移除IOS原生自带的的外观样式

html{

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}          

移除移动端点击页面产生的蓝色遮罩层

html{

-webkit-tap-highlight-color: rgba(0,0,0,0)

}     

IOS点击事件300ms时延解决方案（更多解决方案：https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari）

html{

-ms-touch-action: manipulation;touch-action: manipulation;

}

IOS下fixed布局滚动流畅性非常差，需要添加此属性增强流畅性

.selector{

 -webkit-overflow-scrolling: touch;

}

禁止IOS弹出各种操作窗口

html{

-webkit-touch-callout:none;

}

禁止用户选中文字

.selector{

-webkit-user-select:none;

}

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal，（stackoverflow也可查到这种解决办法）。

阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

引入fastclick处理点击label无法触发input选中的解决方案

label > * { pointer-events: none; }

字体加粗的另一种形式（不太常用，很有意思）

.selector{

-webkit-text-stroke: 1px #888;

}

裁剪绝对定位元素（跟这篇无关，很有意思）

.img{

position: absolute;//被裁剪元素必须为绝对定位元素

clip:rect(0px 50px 210px 0px);//顺时针定义裁剪规则

}