css 重置代码

àì夳堔傛蜴生んèń 2022-06-09 03:42 169阅读 0赞

为啥要重置css

因为每个浏览器默认的css有些不一样呗

参考的139邮箱的前端   [啊干][Link 1]  (因为 鄙人在139前端团队呆了一年多 所以参考这个)

/* 清除内外边距 */
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    pre, /* text formatting elements 文本格式元素 */
    fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
    th, td { /* table elements 表格元素 */
        margin: 0;
        padding: 0;
    }
    
    /* 设置默认字体 */
    body,
    button, input, select, textarea { /* for ie */
        /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
        font: 12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    }
    
    h1 { font-size: 18px; line-height:1.5; /* 18px / 12px = 1.5 */ }
    h2 { font-size: 16px;}
    h3 { font-size: 14px;}
    h4, h5, h6 { font-size: 100%; }
    
    address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
    code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
    small { font-size: 12px; line-height:1.5;} /* 小于 12px 的中文很难阅读，让 small 正常化 */
    
    /* 重置列表元素 */
    ul, ol { list-style: none;}
    
    /* 重置文本格式元素 */
    a { text-decoration: none; line-height:1.2;}
    a:hover { text-decoration: underline; }
    
    
    /* 重置表单元素 */
    legend { color: #000; } /* for ie6 */
    fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
    /* 注：optgroup 无法扶正 */
    button, input, select, textarea {
        font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
    	line-height:1.6;/*解决IE浏览器文字太靠近顶部的问题*/
    }
    
    /* 重置表格元素 */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* 重置 hr */
    hr {
        border: none;
        height: 1px;
    }

这是taobao的 css重置

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
        margin: 0;
        padding: 0;
    }
    
    body,button,input,select,textarea {
        font: 12px / 1.5 tahoma,
        arial,
        \5b8b\4f53;
    }
    h1,h2,h3,h4,h5,h6 {
        font - size: 100 % ;
    }
    address,cite,dfn,em,var {
        font - style: normal;
    }
    code,kbd,pre,samp {
        font - family: courier new,
        courier,
        monospace;
    }
    small {
        font - size: 12px;
    }
    ul,ol {
        list - style: none;
    }
    a {
        text - decoration: none;
    }
    a: hover {
        text - decoration: underline;
    }
    sup {
        vertical - align: text - top;
    }
    sub {
        vertical - align: text - bottom;
    }
    legend {
        color: #000;
    }
    fieldset,
    img {
        border: 0;
    }
    button,input,select,textarea {
        font - size: 100 % ;
    }
    table {
        border - collapse: collapse;
        border - spacing: 0;
    }

qq zone的

html {
        font - size: 62.5 % ;
        font - family: Tahoma
    }
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, button, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0
    }
    body {
        line - height: 1.333;
        font - size: 12px
    }
    h1,h2,h3,h4,h5,h6 {
        font - size: 100 %
    }
    input,textarea,select,button {
        font - size: 12px;
        font - weight: normal;
        font - family: inherit
    }
    input[type = "button"],input[type = "submit"],select,button {
        cursor: pointer
    }
    table {
        border - collapse: collapse;
        border - spacing: 0
    }
    address,caption,cite,code,dfn,em,th,var {
        font - style: normal;
        font - weight: normal
    }
    li {
        list - style: none
    }
    caption,th {
        text - align: left
    }
    q: before,q: after {
        content: ''
    }
    abbr,acronym {
        border: 0;
        font - variant: normal
    }
    sup {
        vertical - align: text - top
    }
    sub {
        vertical - align: text - bottom
    }
    fieldset,img,a img,iframe {
        border - width: 0;
        border - style: none
    }
    iframe {
        overflow: hidden
    }
    img { - ms - interpolation - mode: bicubic
    }
    textarea {
        resize: vertical;
        overflow - y: auto
    }
    legend {
        color: #000
    }
    a {
        text - decoration: none
    }
    a: hover {
        text - decoration: underline
    }
    hr {
        height: 0
    }
    label {
        cursor: pointer
    }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        display: block
    }

[Link 1]: http://www.cnblogs.com/radom/