常用 CSS hacks 整理


  1. 浏览器 hack 特性
  2. 不同浏览器区分方法
  3. 其他 hack 用法

一、浏览器 hack 特性

Firefox, Chrome, Safari, Opera, IE8, IE7可识别:

1
2
3
4
[xmlns] #item {
    color: red;
}
/*html标签属性hack*/
1
2
3
4
html>body #item {
    color: red;
}
/*子选择符hack*/
1
2
3
4
#content>#item {
    color: red;
}
/*子选择符hack,这里#content必须为#item的直接父级*/

Firefox, Chrome, Safari, Opera, IE8可识别:

1
2
3
html>/**/body #item {
    color: red;
}

Chrome, Safari, Opera可识别:

1
2
3
4
5
@media all and (min-width:0px) {
    #item {
        color: red;
    }
}

所有IE可识别:

1
2
3
#item {
    color: red\9;
}

只有IE8可识别:

1
2
3
#item {
    color:/*\**/red\9;
}

只有IE7可识别:

1
2
3
*+html #item {
    color: red;
}

IE7及以下可识别:

1
2
3
#item {
    *color: red;
}
1
2
3
#item {
    color: red !ie;
}

IE6及以下可识别:

1
2
3
#item {
    _color: red;
}
1
2
3
* html #item {
    color: red;
}
1
2
3
html/**/ >body #item {
    color: red;
}

只有IE6不识别:

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

只有IE6与IE5不识别:

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

只有IE5不识别:

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

只有IE Mac 5识别:

1
2
3
4
5
/*\*/
#item {
    color: red;
}
/**/

二、不同浏览器区分方法

IE与非IE浏览器:

1
2
3
4
#item {
    color: red; /* 非IE浏览器 */
    color: blue\9; /* IE */
}

IE8 与 其他浏览器:

1
2
3
4
#item {
    color: red; /* 其他浏览器 */
    color:/*\**/blue\9; /* IE8 */
}

IE6、IE7 与 其他浏览器:

1
2
3
4
#item {
    color: red; /* 其他浏览器 */
    *color: blue; /* IE6、IE7 */
}
1
2
3
4
#item {
    color: red; /* 其他浏览器 */
    color: blue !ie; /* IE6、IE7 */
}

IE6 与 现代浏览器:

1
2
3
4
#item {
    color: red !important; /* 现代浏览器 */
    color: blue; /* IE6 */
}
1
2
3
4
#item {
    color: red; /* 现代浏览器 */
    _color: blue; /* IE6 */
}
1
2
3
4
5
6
#item {
    color: blue; /* IE */
}
[xmlns] #item {
    color: red; /* 现代浏览器 */
}

同时区分IE8、IE7、IE6、Firefox:

1
2
3
4
5
6
#item {
    color: red; /* Firefox */
    color:/*\**/blue\9; /* IE8 */
    *color: green; /* IE7 */
    _color: yellow; /* IE6 */
}

同时区分IE8、IE7、IE6、Firefox3、Firefox2:

1
2
3
4
5
6
7
8
9
10
11
12
13
#item {
    color:/*\**/blue\9; /* IE8 */
}
#item,
#item:-moz-any-link {
    color: orange; /* Firefox2 */
}
#item,
#item:default {
    color: red; /* Firefox3 */
    *color: green; /* IE7 */
    _color: yellow; /* IE6 */
}

IE5.5 与 IE6:

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

IE5 与 IE5.5+:

1
2
3
4
5
6
#item {
    >/*IE only*/color: red; /*IE5*/
}
#item/*IE5.5+*/{
    >/*IE only*/color: black;
}

IE6 与 FF 与 IE5.5-:

1
2
3
4
5
6
#item {
    color: blue; /*IE5.5-*/
    voice-family: "\"}\"";
    voice-family: inherit;
    color: red; /*IE6&FF*/
}
1
2
3
4
5
6
7
8
9
#item {
    color: red; /*IE6&FF*/
    voice-family: ""}"";
    voice-family: inherit;
    color: blue; /*IE5.5-*/
}
html>#item {
    color: blue;
}

IE5 与 IE5.5 与 IE6 与 FF:

1
2
3
4
5
6
7
8
#item {
    color: red !important; /*FF*/
    color: blue; /*IE5*/
}
#item/*IE5.5+*/{
    >/*IE only*/color: black; /*IE6*/
    >/*IE only*/color /*IE5.5*/: green;
}

三、其他 hack 用法

闭合浮动 (clearfix):

1
2
3
4
5
6
7
.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*/

字符截断 (处理成单行):

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

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

1
2
3
a {
    outline: none;
}
1
2
3
a:focus {
    -moz-outline-style: none;
}

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

1
2
3
4
* html #item {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

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

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

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

1
2
3
4
5
#item {
    min-width: 760px;
    max-width: 960px;
    _width: expression(this.clientWidth < 760 ? "760px" : this.clientWidth > 960 ? "960px" : "auto");
}