10大跨浏览器的CSS hack技术与应用
CSS的作用，在这里就不用多说了。在这篇文章中，让我们看看10个跨浏览器的CSS Hack，这些在平时的项目中都是非常实用的。
1 – Cross browser inline block（跨浏览器的 inline-block ）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
</div>
</li>
<li>
<!-- etc ... -->
</li>
</ul> |
来源：Cross browser inline-block property
2 – Disable Textarea resizing for Safari（Safari 下禁用文本大小）
1 2 3 4 | / * Supports: car, both, horizontal, none, vertical * /
textarea{
resize: none;
} |
3 – Cross browser rounded corners（跨浏览器圆角）
1 2 3 4 | .rounded{
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
} |
来源：Border-radius: create rounded corners with CSS!
4 – Cross browser min-height property（跨浏览器最小高度设置）
1 2 3 4 5 | selector {
min-height:500px;
height:auto !important;
height:500px;
} |
5 – Image Rollover Borders That Do Not Change Layout（图像hover描边，结构不闪动）
1 2 3 4 5 6 7 8 9 10 11 | #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;
} |
来源：Image rollovers that do not change layout
6 – Cross browser transparency（跨浏览器背景半透明）
1 2 3 4 5 6 | .transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
} |
来源：CSS transparency settings for all browsers
7 – Lighbox in pure CSS: No Javascript needed!（无JS全屏遮照）
来源：Lightbox effect in pure CSS: No javascript needed!
8 – Cross browser pure css tooltips（跨浏览器CSS工具提示）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style type="text/css">
a:hover {
background:#ffffff;
text-decoration:none;} /*BG color is a must for 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 href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>. |
9 – Set color of selected text (Firefox/Safari only)（设置文字选取颜色，Firefox/Safari）
1 2 3 4 5 6 | ::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
} |
来源：Use CSS to Override Default Text Selection Color
10 – Add File Type Icons next to your links（链接旁边加上图标）
1 2 3 4 5 | a[href^="http://"] {
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
} |
来源：Add File Type Icons next to your links with CSS
译自：10 astonishing CSS hacks and techniques
Popularity: unranked
-
作者：sonic
- 设计者/前端工程师，多年前端从业经验，提供付费“PSD转HTML”“PSD转WordPress”服务，有需要请联系:sonichtml[at]gmail.com
好东西，认真学习
有空多来交流喔。。