记录一些经常忘记的CSS代码（CSS bug/hack 收集贴）

强制换行：

.wrap{word-wrap:break-word;word-break:break-all;}

清除浮动：

.clearfix{*zoom:1;}
.clearfix:after{clear:both;content:"\0020";display:block;height:0;font-size:0;visibility:hidden;}

IE6、7下inline-block和text-indent导致不显示

.btn{background:url("图片地址") no-repeat;width:160px;height:50px;overflow:hidden;display:inline-block;*zoom:1;line-height:999px;vertical-align:middle;}

IE6、7下超链接设置absolute并且无背景时Hover无效的Bug

a{*background:url(about:blank);}

隐藏标签文本

.hideText{overflow:hidden;line-height:999px;}

尼玛，这次又遇到个IE6下的无厘头Bug，场景如下：

<table>
    <tr>
        <td><a id="Btn" class="btn1">button文字</a></td>
    </tr>
</table>

CSS部分：

.btn1{display:block;margin:0 auto;width:294px;height:64px;line-height:999px;overflow:hidden;cursor:pointer;background:url(img_disabled) no-repeat;}
.btn2{background:url(img_enabled) no-repeat;}

在IE6/7页面下，用js给“#Btn”添加样式“btn2”时，会导致“#Btn”出现很高的margin-top，经过测试发现是“line-height:999px”导致，在后面加一句“*line-height:0”就能解决。（还不知道是什么原因，先记下来）

于是有下面这新的CSS样式：

.btn1{display:block;margin:0 auto;width:294px;height:64px;line-height:999px;*line-height:0;overflow:hidden;cursor:pointer;background:url(img_disabled) no-repeat;}
.btn2{background:url(img_enabled) no-repeat;}

IE6 + png24 透明图片（滤镜）

.IE6png{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=image.png);_background:none;}

全系列CSS Hack

.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }