​

1 – 跨浏览器的inline-block

10个非常有用的CSS hack和技术_safari




<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="http://www.qianduan.net/wp-content/uploads/2009/06/0933264tq.jpg" alt="lobster" width="75" height="75"/>
</div>
</li>
<li>
<!-- etc ... -->
</li>
</ul>


 ​

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

10个非常有用的CSS hack和技术_跨浏览器_02




/ * 支持: car, both, horizontal, none, vertical * /
textarea {
      resize: none;
}


3 – 跨浏览器圆角

10个非常有用的CSS hack和技术_css3_03




.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
 border-radius:5px;
}


 

4 – 跨浏览器min-height 属性

10个非常有用的CSS hack和技术_css3_04




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


 ​

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

10个非常有用的CSS hack和技术_css_05




#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 – 跨浏览器的透明

10个非常有用的CSS hack和技术_firefox_06




.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 ！

10个非常有用的CSS hack和技术_firefox_07

 ​

8 – 跨浏览器的纯CSS提示

10个非常有用的CSS hack和技术_safari_08




<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)

10个非常有用的CSS hack和技术_css_09




::selection {
background: #ffb7b7; /* Safari */
}

::-moz-selection {
background: #ffb7b7; /* Firefox */
}


 ​

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

10个非常有用的CSS hack和技术_css_10




a[href^="http://"] {
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}