Css前端开发 hack插件

idea 前端开发插件|出国前端开发招聘信息|web前端开发技术 教案

表示非IE浏览器

<!–

表示IE浏览器

/ 运行在版本号小于 的 IE 浏览器上 */

/ 运行在版本号小于或等于 的 IE 浏览器上 */

一、IE 6 专有 css hack

菠菜哥在此先说一句：忘记吧。

IE6 : 十年之后，我们是朋友，还可以问候，只是那种温柔，再也找不到拥抱的理由……

在此分享即将逝去的 IE6 十 年 历 程 （菠菜哥推荐）

http://player.youku.com/player.php/sid/XMjc4MzYxMTY0/v.swf

[table=98%]

[tr][td]1

2

3

4

[/td][td]1. html Selector {} / Selector 表示 css选择器 下同 */

Selector { _property: value; } / property: value 表示 css 的属性名: 属性值 下同 /

Selector { _property//: //value; }

Selector { -property: value; }

[/td][/tr]

[/table]

二、IE 7 专有 css hack[table=98%]

[tr][td]1

2

[/td][td]1. *+html Selector {}

*:first-child+html Selector {}

[/td][/tr]

[/table]

三、IE 8 无专用 css hack，但可以通过css hack组合方式达到针对 IE 8 的样式设置[table=98%]

[tr][td]1

2

3

4

5

[/td][td]Selector { / 注意看value值的设置哦 /

property: value1; / W3C MODEL /

property: value2\0; / IE 8+ /

property: value1\9\0; / IE 9+ /

}

[/td][/tr]

[/table]

可惜暂时没有整理出 IE 9+ 的专有 css hack，可能是IE 9+ 已经开始趋向于向 W3C 的标准靠近了，所以再搞出专有的 css hack 就显得没多大的必要了。不过对于 css hack 的整理还没结束，下面小天也整理了非专有的 IE css hack。四、IE 6+ css hack[table=98%]

[tr][td]1

[/td][td]Selector { property: value\9; }

[/td][/tr]

[/table]

五、IE 6-7 css hack[table=98%]

[tr][td]1

2

3

[/td][td]1. Selector { *property: value; }

Selector { #property: value; }

Selector { +property: value; }

[/td][/tr]

[/table]

考大家一个问题，下面的 css hack 应用在哪个 IE 浏览器呢？[table=98%]

[tr][td]1

[/td][td]Selector { %property: value; }

[/td][/tr]

[/table]

答案是：IE 6-7。为什么 % 号也可以呢？其实通过测试，小天发现一个更严重的 bug ：* 号可以代表很多符号，只要 property 前面添加的若干符号（注意是若干哦）不包含 _（下划线）、数字符号或不影响property属性名的前提下的字符串，那么这个 css 属性都可以在 IE 6-7 中正常显示。是不是很奇葩…六、IE 8+ css hack[table=98%]

[tr][td]1

[/td][td]Selector { property: value\0; }

[/td][/tr]

[/table]

七、IE 9+ css hack[table=98%]

[tr][td]1

[/td][td]Selector { property: value\9\0; }

[/td][/tr]

[/table]

移动前端开发原则|移动端前端开发库|移动前端开发面试题