@charset "utf-8"; body { font-family: "微软雅黑"; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * 更正IE 8/9中未定义的‘inline-block’元素显示 */ audio, canvas, video { display: inline-block; } /* * 防止现代浏览器将没有controls属性的的‘audio’元素显示出来 * 移除 iOS 5 设备中多余的高度 */ audio:not([controls]) { display: none; height: 0; } /* * 校正IE 8/9中‘hidden’属性不起作用的问题 */ [hidden] { display: none; } /* ========================================================================== 基本 ========================================================================== */ /* * 1. 将默认字体设置为 sans-serif * 2. 在不禁止用户缩放的情况下避免iOS设备方向调整后自动校正字体大小 */ body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0} html { font-family:'微软雅黑','Hiragino Sans GB',Helvetica,Arial,'Lucida Grande',sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * 移除缺省的外边距 */ body { margin: 0 auto; } /* ========================================================================== Links ========================================================================== */ /* * 校正‘outline’在Chrome和其他浏览器间的不一致 */ /* * 增强在所有浏览器中聚焦和鼠标悬停时的可读性 */ a{ text-decoration: none; } a:active, a:hover { outline: 0; } /* ========================================================================== 排版 ========================================================================== */ /* * 校正 Firefox 4+,Safari 5 和 Chrome 中‘section’和‘article’内的‘h1’字体大小 */ h1 { font-size: 2em; } /* * 校正IE 8/9, Safari 5 和 Chrome中样式不呈现的问题 */ abbr[title] { border-bottom: 1px dotted; } /* * 校正 Firefox 4+, Safari 5 和 Chrome 中‘bolder’的样式 */ b, strong { font-weight: bold; } /* * 校正 Safari 5 和 Chrome 中样式不呈现的问题 */ dfn { font-style: italic; } /* * 校正 IE 8/9 中样式不呈现的问题 */ mark { background: #ff0; color: #000; } /* * 更正 Safari 5 和 Chrome 中奇怪的字体设置 */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* * 增强所有浏览器中预格式化文本的可读性 */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * 设置一致的引用类型 */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * 校正所有浏览器中易变且不一致的字体大小 */ small { font-size: 80%; } /* * 防止所有浏览器中的‘sub’和‘sup’影响到行高(line-height) */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== 嵌入内容 ========================================================================== */ /* * 移除在 IE 8/9 中嵌入到‘a’元素时的边框 */ img { border: 0; } /* * 更正 IE 9 中奇怪的‘overflow’表现 */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * 更正 IE 8/9 和 Safari 5 中外边距不展示的问题 */ figure { margin: 0; } /* ========================================================================== 表单 ========================================================================== */ /* * 定义一致的边框、外边距和内边距 */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. 更正 IE 8/9 中颜色不继承的问题 * 2. 移除内边距确保人们在将fieldset设置为0时不会大跌眼镜 */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* * 1. 更正所有浏览器中字体不继承的问题 * 2. 更正所有浏览器中字号不继承的问题 * 3. 更正 Firefox 4+, Safari 5 和 Chrome 中外边距不同的问题 */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /* * 更正 Firefox 4+ 用户代理样式表(UA stylesheet)中在‘input’上 * 设置‘line-height’时使用‘!important’的问题 */ button, input { line-height: normal; } /* * 1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会破坏原生的‘audio * 和‘video’控制器 * 2. 更正 iOS 中无法设置可点击的‘input’的问题 * 3. 增强图片类型以及其他类型的‘input’中指针的可用性以及样式的一致性 */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* * 重置disabled元素的默认指针样式 */ button[disabled], input[disabled] { cursor: default; } /* * 1. 调整 IE 8/9 box sizing 被设置为 ‘content-box’ 的问题 * 2. 移除 IE 8/9 中多余的内边距 */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. 校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 * 2. 校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (include `-moz` to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * 移除 OS X 中 Safari 5 和 Chrome 内部的内边距以及搜索框的取消按钮 */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * 移除 Firefox 4+ 内部的内边距 */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. 移除 IE 8/9 中默认的垂直滚动条 * 2. 增强所有浏览器中的对对齐以及可读性 */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== 表格 ========================================================================== */ /* * 移除单元格间大部分的间距 */ table { border-collapse: collapse; border-spacing: 0; } /* * 清除浮动 */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden } .clearfix { *+height: 1%; } /* * 清除ios手机input按钮默认样式 */ input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none; } input:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plaintext-only; } input:focus, textarea:focus { outline: none; } /* * 清除点击样式 */ .tap_init{ -webkit-tap-highlight-color:transparent; } /* * 清除列表 */ ul,ol,dl,li,dd,dt{ list-style: none; } /* * 清楚自带样式 */ em,b,strong{ font-style: normal; } button,input { outline: 0 none; border: 0 none; background: transparent; } .inline-block { display: inline-block; letter-spacing: normal; font-size: 16px; vertical-align: middle; } .inline-block-parent { font-size: 0; letter-spacing: -6px; } input::-webkit-input-placeholder { font-family: "微软雅黑"; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 50px white inset; -webkit-text-fill-color: #999; } .i-b-p{ font-size: 0; letter-spacing: -4px; } .i-b{ display: inline-block; vertical-align: middle; letter-spacing: normal; }