收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 14464|回复: 33

[教程] 响应版主号召,CSS Hack整理

[复制链接]
发表于 2008-1-16 23:56:22 | 显示全部楼层 |阅读模式
原文出处 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的运用,一一列举的话可能能写成一本书了...想到再添加吧.

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

评分

参与人数 1威望 +3 收起 理由
blank + 3 谢谢整理!

查看全部评分

发表于 2008-1-17 00:28:59 | 显示全部楼层
头大了,收藏了
回复 支持 反对

使用道具 举报

发表于 2008-1-17 09:04:50 | 显示全部楼层
非常实用,非常感谢。
回复 支持 反对

使用道具 举报

发表于 2008-1-17 09:32:35 | 显示全部楼层
ps楼主,二楼的图转载应该放上原出处!!!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-17 09:40:16 | 显示全部楼层
如果版主知道该图出处的话请帮忙补充一下吧...
只知道是国外的,第一次见是在w3cn上,那里标明也是国外摘来的,但没有出处...
不是不想标,是没法标,难道标国内转载的网站么..
回复 支持 反对

使用道具 举报

发表于 2008-1-17 09:43:52 | 显示全部楼层
selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
--------------------------------------------------------------------------------

为什么我测试的只能屏蔽IE5呢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-17 09:46:45 | 显示全部楼层
re 6楼 7楼两位,加分是版主的行为,在这里讨论并不是为了加分吧?这个分数有什么用呢?对版主操作有疑问的话可以联系版主或者管理员,扣去也无所谓啊
回复 支持 反对

使用道具 举报

发表于 2008-1-17 09:57:55 | 显示全部楼层
其实是一直很反对用hack的...不要动不动就用hack..
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-17 10:01:58 | 显示全部楼层
原帖由 [i]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



继续纠错...
回复 支持 反对

使用道具 举报

发表于 2008-1-17 10:06:49 | 显示全部楼层
感谢楼主整理~~~~~~~~~~~~~~~~~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-17 10:06:50 | 显示全部楼层
查到兼容一览图的原文出处,且有更新!

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

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


点击图片可放大
回复 支持 反对

使用道具 举报

发表于 2008-1-17 11:47:54 | 显示全部楼层
能不用的最好不要用这些HACK, 浏览器(特别是Ie)不是一直不变的。
今天的hack能用,不一定后面不会出问题
回复 支持 反对

使用道具 举报

发表于 2008-1-17 12:39:10 | 显示全部楼层
不到万不得已不用hack,要用也单独写在一个.CSS里
回复 支持 反对

使用道具 举报

发表于 2008-1-17 13:23:45 | 显示全部楼层

本人从不用hack

要写就写兼容的.

方法不只一种..........
回复 支持 反对

使用道具 举报

发表于 2008-1-17 14:45:18 | 显示全部楼层
慎用hack...,用条件注释有利于团队制作合作管理!
回复 支持 反对

使用道具 举报

发表于 2008-1-17 15:09:52 | 显示全部楼层
发个比较权威点的E文资料
http://www.webdevout.net/css-hacks#p2006.4.28.22.56:12

评分

参与人数 1威望 +1 收起 理由
greengnn + 1 请大家阅读这篇文章,挺不错的。

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2008-1-17 23:08:01 | 显示全部楼层
不支持使用hack,万不得已的时候用一下.我基本上就不用.
回复 支持 反对

使用道具 举报

发表于 2008-1-17 23:16:16 | 显示全部楼层
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也能识别,你自己去揣摩

[[i] 本帖最后由 Ashung 于 2008-1-17 23:19 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-17 23:47:42 | 显示全部楼层
谢谢谢谢~学习学习~我了解的只有很小的一部分,测试的也不充分,谢谢Ashung指正.


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

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

[[i] 本帖最后由 zergine 于 2008-1-17 23:52 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-1-18 00:00:14 | 显示全部楼层
大致测试了一下

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浏览器
回复 支持 反对

使用道具 举报

发表于 2008-1-18 17:28:20 | 显示全部楼层
太复杂了!
回复 支持 反对

使用道具 举报

发表于 2008-1-19 07:37:13 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2008-1-21 09:51:55 | 显示全部楼层
看来还是用IE的条件注释吧
回复 支持 反对

使用道具 举报

发表于 2008-1-21 11:51:00 | 显示全部楼层
用其实也无所谓吧,浏览器更新也不是几个月的事,那个时候网站遭更新了!
回复 支持 反对

使用道具 举报

发表于 2008-1-21 14:14:55 | 显示全部楼层
微软好像要强制用户升级到IE7了,并且不用正版验证了。
回复 支持 反对

使用道具 举报

发表于 2008-2-22 22:55:01 | 显示全部楼层
@media all and (min-width: 0px){ selector { property:value; } }

Safari也识别
回复 支持 反对

使用道具 举报

发表于 2008-2-23 11:31:49 | 显示全部楼层
非常不错嘛....

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

使用道具 举报

发表于 2008-7-1 23:01:54 | 显示全部楼层
好东西,先收藏了!
回复 支持 反对

使用道具 举报

发表于 2008-7-2 10:41:42 | 显示全部楼层
CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:
这个不免了吧,IE5X是完全放弃的时候了
回复 支持 反对

使用道具 举报

发表于 2008-7-2 15:12:47 | 显示全部楼层
好东西值得学习
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2018-1-21 08:44 , Processed in 0.156250 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表