一方天

1. 浏览器 hack 特性
2. 不同浏览器区分方法
3. 其他 hack 用法
4. 附：CSS hack 浏览器兼容性一览表

---

一、浏览器 hack 特性 [回到顶部]

只有Firefox, Opera可识别

*:lang(zh-CN) #item{
font:12px !important;
}
/*需要在body中加一条属性lang=”zh-CN”*/

或：
[xmlns] #item{
color:red; /* Firefox */
}

或：
html>/**/body #item{
color:red;
}

只有Oprea可识别

@media all and (min-width:0px){
#item{font-size:90%;}
}

只有Safari可识别

#item:empty{
color:red;
}
/*empty选择器为CSS3的规范,尽管Safari并不支持此规范,但是还是会选择此元素*/

只有IE7和现代浏览器可识别

html>body #item{
color:red;
}

或：
#content>#item{
color: red;
}
/*这里#content必须为#item的直接父级*/

只有IE7可识别

*+html #item{
color:red;
}

或：
*:first-child+html #item{
color:red;
}

只有IE Mac 5识别

/*\*/
#item{
color:red;
}
/**/

只有IE6及以下识别

* html #item{
color:red;
}

或：
html/**/ >body #item{
color:red;
}

只有IE6不识别

#item{
color /*IE6不识别*/:red;
}

只有IE6与IE5不识别

#item/**/{
color /*IE6,IE5不识别*/:red;
}

只有IE5不识别

#item/*IE5不识别*/{
color:red;
}

二、不同浏览器区分方法 [回到顶部]

Firefox 与 IE

#item{
color:red; /* Firefox */
>color:blue; /* IE */
}

或
#item{
color:blue; /* IE */
}
[xmlns] #item{
color:red; /* Firefox */
}

IE6 与 IE7+Firefox

#item{
color:red !important; /* Firefox、IE7中提升优先权 */
color:blue; /* IE6 */
}

IE7 与 FF 与 Mac

#item {
color:red !important; /* IE7 */
}
lang(en) #item{
color:green !important; /* FF */
}
#item:empty {
color:blue !important; /* Mac */
}

IE5.5 与 IE6

#item{
>/*IE only*/color:black;
>/*IE only*/color /*IE5.5*/:green; /* 属性名之后要有一个空格，且第二个注释中间不能有空格 */
}

IE5 与 IE5.5+

#item{
>/*IE only*/color:red; /*IE5*/
}
#item/*IE5.5+*/{
>/*IE only*/color:black;
}

IE6 与 FF 与 IE5.5-

#item{
color:blue; /*IE5.5-*/
voice-family:”\”}\”";
voice-family:inherit;
color:red; /*IE6&FF*/
}

或：
#item{
color:red; /*IE6&FF*/
voice-family:”"}”";
voice-family:inherit;
color:blue; /*IE5.5-*/
}
html > #item{
color:blue;
}

IE5 与 IE5.5 与 IE6 与 FF

#item{
color:red !important; /*FF*/
color:blue; /*IE5*/
}
#item/*IE5.5+*/{
>/*IE only*/color:black; /*IE6*/
>/*IE only*/color /*IE5.5*/:green;
}

三、其他 hack 用法 [回到顶部]

闭合浮动 (clearfix)

.clearfix:after {content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
*+html .clearfix {min-height:1%;} /*IE7*/

字符截断 (处理成单行)

.wordBreak{
display:block; /* 行元素需要转为块元素 */
overflow:hidden;
width:100%; /* 宽度可视具体情况设定，为了保证IE6下容器不被撑破，必须设定此值 */
white-space:nowrap;
>text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}

移除超链接的虚线 (仅对Firefox有效)

a{
outline: none;
}

a:focus{
-moz-outline-style:none;
}

让IE6支持PNG透明 (通过此方法处理后，会影响到前景内容)

* html #item{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil
ename.png”, sizingMethod=”scale”);
}

设置容器的最小宽度 (同样的方法也可以设置最大宽的)

#item{
min-width:760px;
width:expression(this.clientWidth < 760 ? "760px" : "auto");
}

同时设置容器的最小宽度和最大宽度

#item{
min-width:760px;
max-width:960px;
width:expression(this.clientWidth < 760 ? "760px" : this.clientWidth > 960 ? “960px” : “auto”);
}

附：CSS hack 浏览器兼容性一览表 [回到顶部]

---