响应版主号召,CSS Hack整理

zergine 楼主

原文出处 zhaozy in 3user.com = zergine in 蓝色

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.

我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11).

在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.



IE系列:

1. selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别.
   
2. selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别.
   
3. selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别.
   
4. * html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
   
5. html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
   
6. selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
   
7. selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
   
8. select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.
   
9. *+html  selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

复制代码

Firefox:

1. *:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

复制代码

Safari:

1. selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

复制代码

Opera:

1. @media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

复制代码

以上的Hack并不完整,大家一起补充.

对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack.

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:

1. selctor { width:IE5.X宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度; }

复制代码

清除浮动Hack,相信这个定义用的人很多:

1. selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

复制代码

另外还有很多很多CSS Hack的运用,一一列举的话可能能写成一本书了...想到再添加吧.

[ 本帖最后由 zergine 于 2008-1-16 23:59 编辑 ]

alex115

头大了，收藏了

mycggo

非常实用，非常感谢。

blank

ps楼主，二楼的图转载应该放上原出处！！！

zergine 楼主

如果版主知道该图出处的话请帮忙补充一下吧...
只知道是国外的,第一次见是在w3cn上,那里标明也是国外摘来的,但没有出处...
不是不想标,是没法标,难道标国内转载的网站么..

mycggo

selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
--------------------------------------------------------------------------------

为什么我测试的只能屏蔽IE5呢

zergine 楼主

re 6楼 7楼两位,加分是版主的行为,在这里讨论并不是为了加分吧?这个分数有什么用呢?对版主操作有疑问的话可以联系版主或者管理员,扣去也无所谓啊

wxjbull

其实是一直很反对用hack的...不要动不动就用hack..

zergine 楼主

原帖由 mycggo 于 2008-1-17 09:43 发表
selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5. ...

multipleIE 下测试

selector { property/**/:value; }应该为 selector {property:"\"/*"value; }

selector/**/ { property/**/:value; } 屏蔽 5.01 不屏蔽6.0



继续纠错...

fhjzzx

感谢楼主整理~~~~~~~~~~~~~~~~~

zergine 楼主

查到兼容一览图的原文出处,且有更新!

http://centricle.com/ref/css/filters/

请版主删除2楼帖子,以本帖表格为主:


点击图片可放大

theuncomcn

能不用的最好不要用这些HACK， 浏览器（特别是Ie）不是一直不变的。
今天的hack能用，不一定后面不会出问题

iinterest

不到万不得已不用hack,要用也单独写在一个.CSS里

weizeyan

要写就写兼容的.

方法不只一种..........

gulu77

慎用hack...，用条件注释有利于团队制作合作管理！

guodong828

发个比较权威点的E文资料
http://www.webdevout.net/css-hacks#p2006.4.28.22.56:12

十字花下

不支持使用hack,万不得已的时候用一下.我基本上就不用.

Ashung

html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.

错了吧，大哥！你有没有测试？

html/**/ >body  selector { property:value; } 有空格，支持IE7，IE5
html/**/>body  selector { property:value; } 无空格， 支持IE7
这个很少见到，常见的是
html>/**/body selector { property:value; } 无空格， IE目前全部不支持
html> /**/body selector { property:value; }
html >/**/body selector { property:value; }
有空格 ， 支持IE5
这么乱的东西一般不用。

*:lang(lang) selector {}并不灵活，必须要有lang属性，而且也不是只有Firefox支持，应该说是只有IE的不支持。

:empty 的支持浏览器是Gecko1.8+，Opera9.5，Konqueror3.5.4+，OminiWeb5.5B+，Safari2+

@media all and (min-width: 0px){ selector { property:value; } }
不是只有Opera支持的，现在Safari也支持了

selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
这个是Hack？？

*+html  selector {}
也不是IE7的专利. 在某种情况下opera也能识别，你自己去揣摩

[ 本帖最后由 Ashung 于 2008-1-17 23:19 编辑 ]

zergine 楼主

谢谢谢谢~学习学习~我了解的只有很小的一部分,测试的也不充分,谢谢Ashung指正.


另:
selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

这个不是常为非IE写的清除浮动hack么? table布局也是一种hack啊...

[ 本帖最后由 zergine 于 2008-1-17 23:52 编辑 ]

zergine 楼主

大致测试了一下

html/**/ >body  selector { property:value; } 有空格,支持IE7,IE5,OP9,SF3,FF2
html/**/>body  selector { property:value; } 无空格,支持IE7,OP9,SF3,FF2
html>/**/body selector { property:value; } 无空格,IE目前全部不支持
html> /**/body selector { property:value; } 支持IE5以及非IE浏览器
html >/**/body selector { property:value; } 支持IE5以及非IE浏览器

szqhui

太复杂了！

osmn00

http://yy.gs/css-hack

mycggo

看来还是用IE的条件注释吧

yeguangyun

用其实也无所谓吧，浏览器更新也不是几个月的事，那个时候网站遭更新了！

mycggo

微软好像要强制用户升级到IE7了，并且不用正版验证了。

鸡毛

@media all and (min-width: 0px){ selector { property:value; } }

Safari也识别

macji

非常不错嘛....

但我个人觉得还是少用hack好,建议就在使用!important 另外 书写css要注意规范化

lin04com

好东西，先收藏了！

touzhao

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:
这个不免了吧，IE5X是完全放弃的时候了

lhnlj2

好东西值得学习