今天小编跟大家讲解下有关10个非常实用的CSS hack技术 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关10个非常实用的CSS hack技术 的相关资料，希望小伙伴们看了有所帮助。
好吧，既然你看了这篇文章，那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘，所以本文中，让我们看看10个肯定能提高你设计的CSS技术吧
1 – 跨浏览器的inline-block
CSS Code复制内容到剪贴板 <style> li{ width:200px; min-height:250px; border:1pxsolid#000; display:-moz-inline-stack; display:inline-block; margin:5px; zoom:1; *display:inline; _height:250px; } </style> <ul> <li> <div> <h4>Thisisawesome</h4> <imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </div> </li> <li> <!--etc...--> </li> </ul>2 – 禁用Safari调整文本框大小
CSS Code复制内容到剪贴板 textarea{ resize:none; }3 – 跨浏览器圆角
CSS Code复制内容到剪贴板 .rounded{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }4 – 跨浏览器min-height 属性
CSS Code复制内容到剪贴板 selector{ min-height:500px; height:auto!important; height:500px; }5 – 不会改变布局的图片滚动边框
CSS Code复制内容到剪贴板 #example-oneaimg,#example-onea{ border:none; overflow:hidden; float:left; } #example-onea:hover{ border:3pxsolidblack; } #example-onea:hoverimg{ margin:-3px; }6 – 跨浏览器的透明
CSS Code复制内容到剪贴板 .transparent_class{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }7 – 纯CSS的Lighbox效果:无需Javascript ！
8 – 跨浏览器的纯CSS提示
CSS Code复制内容到剪贴板 <styletype="text/css"> a:hover{ background:#ffffff; text-decoration:none;} a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px; } a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c; } </style> Easy<aclass="tooltip"href="#">Tooltip<span>ThisisthecrazylittleEasyTooltipText.</span></a>.9 – 为选中的文本设置颜色(尽支持Firefox/Safari)
CSS Code复制内容到剪贴板 ::selection{ background:#ffb7b7; } ::-moz-selection{ background:#ffb7b7; }10 – 在链接后面添加一个文件类型图标
CSS Code复制内容到剪贴板 a[href^="http://"]{ background:transparenturl(../images/external.png)centerrightrightno-repeat; display:inline-block; padding-right:15px; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
