zoukankan      html  css  js  c++  java
  • 国外转过来十个最好的CSS hacks

    If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..

    Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

    1. Vertical align div (垂直居中)

    http://stylizedweb.com/2008/02/01/vertical-align-div/

    2. Min-Height (最小高度)

    selector {
    min-height:500px;
    height:auto; !important
    height:500px;
    }

    3. PNG transparency (透明png)

    http://stylizedweb.com/2007/12/30/png-transparency-issues/

    4. Autoclear (自动清除)

    .container:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .container {display: inline-table;}
    /* Hides from IE-mac \*/
    * html .container {height: 1%;}
    .container {display: block;}
    /* End hide from IE-mac */

    5. Reset CSS (CSS重设)

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
    fieldset,input,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 {
    font-style:normal;font-weight:normal;
    }
    ol,ul {list-style:none;}
    caption,th {text-align:left;}
    h1,h2,h3,h4,h5,h6 {font-size:100%;}
    q:before,q:after {content:”;}

    6. Scrolling Render IE (IE滚动条渲染)

    html {
    background : url(null) fixed no-repeat;
    }

    7. Opacity (透明度)

    #transdiv {
    filter:alpha(opacity=75);
    -moz-opacity:.75;
    opacity:.75;
    }

    8. PRE Tag (标签预格式)

    pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    9. Li Background Repeat IE (LI标签背景重复)

    <!–[if lt IE 7]>
    <style>
    #leftnav li { zoom: 1;} /* haslayout=true */
    </style>
    <![endif]–>

    10. Good to know (最好知道的)

    @charset “UTF-8″;

    /* ———————————————————————-
    WinIE7
    ———————————————————————- */
    *:first-child+html selector{property:value;}

    /* ———————————————————————-
    WinIE6 & Mac IE
    ———————————————————————- */
    * html selector{property:value;}

    /* ———————————————————————-
    WinIE6
    ———————————————————————- */
    /*\*/
    * html selector{property:value;}
    /**/

    /* ———————————————————————-
    MacIE
    ———————————————————————- */
    /*\*//*/
    selector{property:value;}
    /**/

  • 相关阅读:
    将js进行到底:node学习1
    mui开发app前言(一)
    用kotlin方式打开《第一行代码:Android》之开发酷欧天气(最终版)
    用kotlin方式打开《第一行代码:Android》之开发酷欧天气(2)
    用kotlin方式打开《第一行代码:Android》之开发酷欧天气(1)
    062、如何使用flannel host-gw backend(2019-04-02 周二)
    061、flannel的连通与隔离(2019-04-01 周一)
    060、在docker中使用flannel(2019-03-29 周五)
    059、安装配置flannel(2019-03-28 周四)
    058、flannel概述(2019-03-27 周三)
  • 原文地址:https://www.cnblogs.com/youxin/p/2229234.html
Copyright © 2011-2022 走看看