10个非常实用的CSS hack技术

好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧

1 – 跨浏览器的inline-block

CSS Code复制内容到剪贴板 <style>        li {            width: 200px;            min-height: 250px;            border: 1px solid #000;            display: -moz-inline-stack;            display: inline-block;            margin: 5px;            zoom: 1;            *display: inline;            _height: 250px;        }    </style>     <ul>     <li>      <div>       <h4>This is awesome</h4>       <img src="/wp-content/uploads/2009/06/0933264tq.jpg" alt="lobster" width="75" height="75"/>      </div>     </li>     <li>      <!-- etc ... -->     </li>    </ul>      

2 – 禁用Safari调整文本框大小

CSS Code复制内容到剪贴板 / * 支持: car, both, horizontal, none, vertical * /    textarea {          resize: none;    }      

3 – 跨浏览器圆角

CSS Code复制内容到剪贴板 .rounded{        -moz-border-radius: 5px; /* Firefox */       -webkit-border-radius: 5px; /* Safari */    border-radius:5px;    }      

4 – 跨浏览器min-height 属性

CSS Code复制内容到剪贴板 selector {      min-height:500px;      height:auto !important;      height:500px;    }      

5 – 不会改变布局的图片滚动边框

CSS Code复制内容到剪贴板 #example-one a img, #example-one a {        border: none;        overflow: hidden;        float: left;    }    #example-one a:hover {        border: 3px solid black;    }    #example-one a:hover img {        margin: -3px;    }      

6 – 跨浏览器的透明

CSS Code复制内容到剪贴板 .transparent_class {     filter:alpha(opacity=50);     -moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/    -khtml-opacity: 0.5;     opacity: 0.5;    }      

7 – 纯CSS的Lighbox效果:无需Javascript ！

8 – 跨浏览器的纯CSS提示

CSS Code复制内容到剪贴板 <style type="text/css">    a:hover {        background:#ffffff;        text-decoration:none;} /***** 背景色对IE6来说是必须的 ****/        a.tooltip span {        display:none;        padding:2px 3px;        margin-left:8px;        width:130px;    }         a.tooltip:hover span{        display:inline;        position:absolute;        background:#ffffff;        border:1px solid #cccccc;        color:#6c6c6c;    }    </style>     Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.      

9 – 为选中的文本设置颜色(尽支持Firefox/Safari)

CSS Code复制内容到剪贴板 ::selection {        background: #ffb7b7; /* Safari */   }         ::-moz-selection {        background: #ffb7b7; /* Firefox */   }      

10 – 在链接后面添加一个文件类型图标

CSS Code复制内容到剪贴板     a[href^="http://"] {        background:transparent url(../images/external.png) center rightright no-repeat;        display:inline-block;        padding-right:15px;    }      

hack CSS