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

转自：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和技术相关推荐

10个非常有用的CSS技巧(m2maomao修正版)
[b]1. 将网页或元素居中[/b] HTML: <div class="wrap"> </div> CSS: ...
史上最全的CSS hack方式一览（转）
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE ...
一天搞定CSS（扩展）：CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
[转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
css hack技术整理
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
史上最全的CSS hack方式一览(鉴)
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
2.css hack 大全【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...