网页重置样式、设置基础样式、取消各浏览器的特殊样式给开发带来的不便

在实际开发中往往会因为各种各样的浏览器或者系统，导致我们的css样式出现这样那样的差异。经常开发的同学应该大多数在开发之前都会先写一个样式表，进行统一处理，然后全局应用。比如css盒模型的box-sizing:border-box;我个人就在开发之前是一定要先给全局样式设置上的；再比如table表格的边框边距啥的需要重合处理之类的；再比如a标签的下划线和点击后颜色啥的；再比如ios下input输入框的阴影样式处理。。。等等等。。。长话短说，我这里直接整理了一个相对完整的css样式表，我一般叫它默认样式重置表：

@charset "utf-8";

/*
@名称: base
@功能: 重设浏览器默认样式
*/

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html, body{
  font-family: -apple-system-font,Helvetica Neue,sans-serif;
  /*font-family: Helvetica,sans-serif!important;*/
  font-size: 15px;
	color: #333333;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
  /*background: #fff;
  line-height: 1.414;*/
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
*{margin:0; padding: 0; box-sizing: border-box;}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}

/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
    display: inline-block;*display: inline;*zoom: 1;
}

p {
    margin-bottom: 0;
}

/* 要注意表单元素并不继承父级 font 的问题 */
/*body,button,input,select,textarea{
font:15px/1.5 微软雅黑;
}*/
input,select,textarea{
font-size:100%;
}

/* 去掉各Table cell 的边距并让其边重合 */
table{
border-collapse:collapse;border-spacing:0;
}

/* IE bug fixed: th 不继承 text-align*/
th{
text-align:inherit;
}

/* 去除默认边框 */
fieldset,img{
border:0;
}

/* ie6 7 8(q) bug 显示为行内表现 */
section iframe{
  display: none;
  border: none;
}

/* 去掉 firefox 下此元素的边框 */
abbr,acronym{
border:0;font-variant:normal;
}

/* 一致的 del 样式 */
del {
text-decoration:line-through;
}

address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}

/* 去掉列表前的标识, li 会继承 */
ol,ul {
list-style:none;
padding-right: 0;
}

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
text-align:left;
}

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 { 
font-weight:500;
padding: 0;
margin: 0;
}

q:before,q:after {
content:'';
}

/* 统一上标和下标 */
sub, sup {
    font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

a{
	color: #666666;
	text-decoration: none;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
	text-decoration: none;
	/*color: #c00;*/
}

/* 默认不显示下划线，保持页面简洁 */
ins,a {
text-decoration:none;
}


 


input:-webkit-autofill, 
textarea:-webkit-autofill, 
select:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff;
    -moz-box-shadow: inset 0 0 0 1000px #fff;
    -webkit-box-shadow: inset 0 0 0 1000px #fff; 
}
/* input的placeholder*/
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  font-size:17px;
  color: #CCCCCC;
}
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  font-size:17px;
  color: #CCCCCC;
}
input:disabled{
  background-color: #fff;
}
/* ios输入框阴影 */
input{
  -webkit-appearance: none;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 0px;  
    height: 0px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  


:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #cccc; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ccc; 
}

:-ms-input-placeholder{
    color: #ccc; 
}

::-webkit-input-placeholder{
    color: #ccc; 
}
 
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */
}
 
ul {
  list-style: none;
  overflow: hidden;
}
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 15px;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
input,button,textarea {
  border: none;
}
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  text-decoration: none;
}
a:focus , a:active , a:link , a:visited {
  text-decoration: none !important;
}
input:focus {
  outline: none;
}
button:focus {
  outline: none;
}
textarea:focus {
  outline: none;
} 

如上所示，感觉好用的不妨拿去试试，对项目的开发还是挺有帮助的，省了好多所谓的样式兼容适配 ，也不需要你在遇到之后再临时去改，直接全局引入，高枕无忧。