my reset.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 优先使用ie最新版本和chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 在网页加载时隐藏地址栏与导航栏 --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略页面中的数字和Email识别为电话号码 --> <meta name="format-detection"content="telephone=no, email=no" /> <title>Document</title> <style> /*.............................reset.css.................................*/ @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ /* text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡 */ html{color: #333;background: #fff;text-rendering: optimizelegibility;} /* 消除ie10里面的那个叉号 */ input:-ms-clear{display:none;} /*消除transition闪屏的两种办法，给运动的元素增加*/ /*设置内嵌的元素在3D空间如何呈现：保留3D*/ -webkit-transform-style:preserve-3d; /*设置进行转换的元素的背面在面对用户时隐藏（动画闪白问题的修复方案）*/ -webkit-backface-visibility:hidden; /*Chrome27正式取消了-webkit-text-size-adjust属性，所有字号最小为12px，要想显示小于12的字体使用：transform：scale()属性缩放即可*/ /*iOS 浏览器横屏时会重置字体大小，设置text-size-adjust为none 可以解决iOS上的问题，但桌面版Safari的字体缩放功能会失效，因此最佳方案是将text-size-adjust为100%*/ html *{outline: 0;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/*用css开启硬件GPU加速*/
transform:translateZ(0)或transform:translate3d(0,0,0)
原生移动端应用总是可以很好的运用GPU，这是它为什么比网页应用表现更好的重要原因。
/*禁止选中文本*/ html,body{-webkit-user-select: none;user-select: none;} html{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} *,*:before,*:after{box-sizing:inherit;} /*移动端字体设置*/ body{font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;} /*禁止长按链接与图片弹出菜单*/ a,img {-webkit-touch-callout: none;} article, aside, details, figcaption, figure, footer, header, menu, nav, section {display: block;} body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,menu,nav,section{margin: 0;padding: 0;} table{border-collapse: collapse;border-spacing: 0;} /*ie bug:th不继承text-align*/ th{text-align:inherit;} /*ie6 7 8 bug:显示为行内表现*/ iframe{display:block;} ul,ol{list-style: none;} input,img,fieldset,textarea{border: none;} img{max-width: 100%;height: auto;} strong,b{ font-weight: bold; color: #000;} caption,em,i,th{font-style: normal;font-weight: 400;} button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-size: 100%;} h1,h2,h3,h4,h5,h6{font-weight: 100;} select,input,img{vertical-align:middle;} select,a,input[type="text"],input[type="password"],input[type=submit],button,input[type=button],textarea{outline-style:none;-webkit-appearance:none;border-radius: 0;} audio,canvas,video{display: inline-block;} del{text-decoration: line-through;} hr{border: none;border-bottom: 1px solid #cfcfcf;margin-bottom: 8px;height: 10px;} /*.clearfix{content: "";display: block;height: 0;clear: both;line-height: 0;visibility: hidden;}*/ .clearfix:before,.clearfix:after{content: "";display: table;} .clearfix:after{clear: both;} .clearfix{zoom: 1;} a{text-decoration: none;} a:hover{text-decoration: underline;} /*ie6&ie7的点状线*/ a:focus,*:focus{outline:none;} .textwrap,.textwrap td,.textwrap th{word-wrap: break-word;word-break: break-all;} .textwrap-table{table-layout: fixed;} .line-u{text-decoration: underline;} .mark{background: #fffdd1;border-bottom: 1px solid #ffedce;padding: 2px;margin: 0 5px;} .hide{display: none;} .show{display: block;} .elli{display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} /*ie6浮动带来的bug*/ .fl,.fr{display:inline;} .fl{float:left;} .fr{float:right;} </style> </head> <body> </body> </html>