CSS RESET(让所有的浏览器站在同一条线上)
自己总结的消除浏览器的默认样式
html{
background:#fff;
color:#000;
}
body{
font:12px/1.5 Arial,宋体;
}
/*用到什么就把他清零*/
*{
margin:0;
padding:0;
border:none;
}
a{
text-decoration:none;
color:#333;
}
a:hover{
text-decoration:underline;
color:#f00;
}
table{
border-collapse:collapse;
border-spacing:0;
}
iframe{
display:block;
}
ol,ul{
list-style:none;
}
.hide{display:none;}
.block{display:block;}
.fl-left{float:left;}
.fl-right{float:right;}
.fl-clear{float:clear;}
/*..........还有许多，参考支付宝前端团队贡献的Alice......................*/
支付宝前端团队Alice项目
/* alice.base 样式模块 */
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
color:#000;background:#fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,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,hgroup,menu,nav,section {
margin:0;padding:0;
}
/* 重设 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;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
font:12px/1.5 tahoma,arial,"Hiragino Sans GB",\5b8b\4f53;
}
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 显示为行内表现 */
iframe {
display:block;
}
/* 去掉 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;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
text-align:left;
}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
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:link {
color: #0ae;
}
/* 鼠标悬停 */
a:hover {
color: #0ae;
text-decoration: underline;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
text-decoration:none;
}
/* 代码字体 */
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/* 清理浮动 */
.fn-clear:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.fn-clear {
zoom:1; /* for IE6 IE7 */
}
/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide {
display:none;
}
/* 设置内联, 减少浮动带来的bug */
.fn-left,
.fn-right {
display:inline;
}
.fn-left {
float:left;
}
.fn-right {
float:right;
}
/* 单行文字溢出时出现省略号，需设定宽度 */
.fn-text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 简单的渐变 */
.fn-linear {
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1));
background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
background:-o-linear-gradient(top, #fcfcfc, #f1f1f1);
background:-ms-linear-gradient(top, #fcfcfc, #f1f1f1);
background: linear-gradient(to bottom, #fcfcfc, #f1f1f1);
}
/* 浅色的渐变 */
.fn-linear-light {
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9));
background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background:-o-linear-gradient(top, #fcfcfc, #f9f9f9);
background:-ms-linear-gradient(top, #fcfcfc, #f9f9f9);
background: linear-gradient(to bottom, #fcfcfc, #f9f9f9);
}
/* 人民币符号 */
.fn-rmb {
font-family: arial;
font-style: normal;
padding-right: 4px;
}
/* chrome 下字体过小的问题 */
.fn-webkit-adjust {
-webkit-text-size-adjust: none;
}