轉自：http://www.qianduan.net/10-useful-css-hacks-and-technique.html

1 – 跨瀏覽器的inline-block

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

資源: 跨瀏覽器的inline-block屬性

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

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

3 – 跨瀏覽器圓角

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

資源:
CSS3系列教程:邊框半徑和圓角
CSS3之旅: border-radius(圓角)
Border-radius:使用CSS制作圓角!

4 – 跨瀏覽器min-height 屬性

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

資源: Min-height fast hack

5 – 不會改變布局的圖片滾動邊框

#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 – 跨瀏覽器的透明

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;/** Firefox 3.5即將原生支持opacity屬性，所以本條屬性只在Firefox3以下版本有效 ***/-khtml-opacity: 0.5;opacity: 0.5; }

資源: 為所有瀏覽器設置CSS透明
CSS3系列教程:透明度
CSS3之旅:RGBa顏色

7 – 純CSS的Lighbox效果:無需Javascript ！

資源:純CSS的Lighbox效果:無需Javascript ！

8 – 跨瀏覽器的純CSS提示

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

資源: Easy CSS Tooltip

9 – 為選中的文本設置顏色(盡支持Firefox/Safari)

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

資源: 使用CSS覆蓋默認的文字選擇顏色

10 – 在鏈接后面添加一個文件類型圖標

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

轉載于:https://www.cnblogs.com/hdchangchang/archive/2012/12/07/3965403.html

總結

以上是生活随笔為你收集整理的10个非常有用的CSS hack和技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。