• css初始化代码方案


    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24)

    为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决。下面列举常用的一些方案:

    1.最耗资源的,最简单的

    * { padding: 0; margin: 0; border: 0; } 

    2.选择性初始化举例(综合)

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button

    form,fieldset,input,textarea,p,blockquote,th,td {   

      padding: 0;   

      margin: 0;   

    }

    批注:上面的写法有问题,会导致浏览器解析异常。原因不明,推荐使用下面替代方案:

    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, var,

    b, u, i, center,

    dl, dt, dd, ol, ul, li,

    fieldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td,

    article, aside, canvas, details, embed, 

    figure, figcaption, footer, header, hgroup, 

    menu, nav, output, ruby, section, summary,

    time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    }

    或者:

    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{margin:0;padding:0;}

    /* 酌情修改 */

    body {

        background:#fff;color:#333;font-size:12px;font-family:"SimSun","宋体","Arial Narrow";

    }

    /* 短引用的内容可取值:''或"" */

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

    /* 缩写,图片等无边框 */

    fieldset,img,abbr,acronym {border: 0 none;}

    abbr,acronym {font-variant: normal;}

    legend {color:#000;}

    /* 清除特殊标记的字体和字号 */

    address,caption,cite,code,dfn,em,strong,th,var {   

      font-weight: normal;   

      font-style: normal;   

    }

    /* 上下标 */

    sup {vertical-align: text-top;}

    sub {vertical-align: text-bottom;}

    /* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/

    table {   

      border-collapse: collapse;   

      border-spacing: 0;   

    }   

    /* 表格标题及内容居左显示 */

    caption,th {text-align: left;}

    input,img,select {vertical-align:middle;}

    /* 清除列表样式 */

    ol,ul {list-style: none;}  

    /* 输入控件字体 */

    input,button,textarea,select,optgroup,option {

        font-family:inherit;

        font-size:inherit;

        font-style:inherit;

        font-weight:inherit;

    }

    /* 标题元素样式清除 */ 

    h1,h2,h3,h4,h5,h6 {   

      font-weight: normal;   

      font-size: 100%;   

    }   

    /* 链接样式,颜色可酌情修改 */

    del,ins,a {text-decoration:none;}

    a:link {color:#009;}

    a:visited {color:#800080;}

    a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} 

    /* 鼠标样式 */

    input[type="submit"] {cursor: pointer;}

    button {cursor: pointer;}

    input::-moz-focus-inner { border: 0; padding: 0;}

    3.sina的

    /* 全局样式 */

    body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{

       margin:0;padding:0;border:0;

    }

    body{

       background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";

    }

    ul,ol{

       list-style-type:none;

    }

    select,input,img,select{

       vertical-align:middle;

    }

    a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

    4.yahoo的

    html {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #000000;

    }

    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 {

       margin: 0;
        padding: 0;

    }

    table {

       border-collapse: collapse;
        border-spacing: 0;

    }

    fieldset, img {

       border: 0 none;

    }

    address, caption, cite, code, dfn, em, strong, th, var {

       font-style: normal;
        font-weight: normal;

    }

    li {

       list-style: none outside none;

    }

    caption, th {

       text-align: left;

    }

    h1, h2, h3, h4, h5, h6 {

       font-size: 100%;
        font-weight: normal;

    }

    q:before, q:after {

       content: "";

    }

    abbr, acronym {

       border: 0 none;
        font-variant: normal;

    }

    sup {

       vertical-align: text-top;

    }

    sub {

       vertical-align: text-bottom;

    }

    input, textarea, select {

       font-family: inherit;
        font-size: inherit;
        font-weight: inherit;

    }

    input, textarea, select {

    }

    legend {

       color: #000000;

    }

    body {

       font: 13px/1.231 arial,helvetica,clean,sans-serif;

    }

    select, input, button, textarea {

       font: 99% arial,helvetica,clean,sans-serif;

    }

    table {

       font-size: inherit;

    }

    pre, code, kbd, samp, tt {

       font-family: monospace;
        line-height: 100%;

    }

    a {

       text-decoration: none;

    }

    a:hover, a:focus {

       text-decoration: underline;

    }

    strong {

       font-weight: bold;

    }

    input[type="submit"] {

       cursor: pointer;

    }

    button {

       cursor: pointer;
    }

    5.博客园的

    /*version: 2.7.0*

    /html, body {

    color: #000;

    background: #FFF;

    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {

    margin: 0;

    padding: 0;

    }

    table {

    border-collapse: collapse;

    border-spacing: 0;

    }

    fieldset, img { border: 0; }

    address, caption, cite, code, dfn, em, strong, th, var, optgroup {

    font-style: inherit;

    font-weight: inherit;

    }

    del, ins { text-decoration: none; }

    li { list-style: none; }

    caption, th { text-align: left; }

    h1, h2, h3, h4, h5, h6 {

    font-size: 100%;

    font-weight: normal;

    }

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

    abbr, acronym {

    border: 0;

    font-variant: normal;

    }

    sup { vertical-align: baseline; }

    sub { vertical-align: baseline; }

    legend { color: #000; }

    input, button, textarea, select, optgroup, option {

    font-family: inherit;

    font-size: inherit;

    font-style: inherit;

    font-weight: inherit;

    }

    input, button, textarea, select { *font-size:100%;

    }

    .clear { clear: both; }

    input::-moz-focus-inner {

    border: 0;

    padding: 0;

    }/*added*/

    input[type=button], input[type=submit] { -webkit-appearance: button; }

    【个人收藏】

  • 相关阅读:
    Angular--ui-router的使用
    一个简单的俄罗斯方块游戏脚本
    c中使用gets() 提示warning: this program uses gets(), which is unsafe.
    最短路径之Floyd算法
    动态规划求最大子序列
    Mac上编译C++报错
    nginx location匹配规则
    nginx配置入门
    拿什么守护你的Node.JS进程: Node出错崩溃了怎么办? foreverjs, 文摘随笔
    ASP.NET 上的 Async/Await 简介
  • 原文地址:https://www.cnblogs.com/ferron/p/4529961.html
Copyright © 2020-2023  润新知