打印

[教程] CSS Hack汇总快查

屏蔽IE浏览器(也就是IE下不显示)
复制内容到剪贴板
代码:
*:lang(zh) select {font:12px  !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别
复制内容到剪贴板
代码:
*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
复制内容到剪贴板
代码:
* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {……}
这句与上一句的作用相同。
仅IE6不识别
复制内容到剪贴板
代码:
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
仅IE6与IE5不识别
复制内容到剪贴板
代码:
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别
复制内容到剪贴板
代码:
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法
复制内容到剪贴板
代码:
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
复制内容到剪贴板
代码:
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。
截字省略号
复制内容到剪贴板
代码:
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
复制内容到剪贴板
代码:
@media all and (min-width: 0px){ select {……}  }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
复制内容到剪贴板
代码:
@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器,一般用不着
复制内容到剪贴板
代码:
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack
复制内容到剪贴板
代码:
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别
以上内容可能并不全面,欢迎大家能和我一起把这些技巧都汇总起来,为以后工作的查询提供一个方便,同时在这里感谢那些研究出这些HACK的作者们。

原文出处:毅博客

[ 本帖最后由 小毅 于 2007-5-28 13:59 编辑 ]
本帖最近评分记录
  • jxdawei 威望 +2 谢谢分享! 2007-4-24 09:24
加上
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

csshack是个好东西,可偶还是不喜欢他,好变态的东西。
其实俺还是喜欢大家去看CSS HACK表,这样更容易全面理解

http://www.planabc.net/demo/csshacks.html

比如:
*+html  {…}

IE5也识别的
个人Blog:PlanABC   团队Blog:淘宝UED  专注Web前端技术!

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
有点不理解~~~
辛苦了,其实以前W3C.CN就已经有一个hack表,


...就是3楼那个
还是太浮躁了!
Genius is formed in quiet -- Goethe

TOP

其实有时候并不须要这么多的CSS HACK。
我觉得只要记住能区分开各浏览器之间的方法就行了。
不过还是得感谢楼主哦。

TOP

css hack hack多了,反而糊涂了,呵呵。
体验游戏 game4power

TOP

加个[xmlns] #as{}
IE不识别
英文歌大全:www.thesongs.cn

TOP

2#那个挺有用,还有!important
其他的了解一下就可以了,实在没多大用处,没见过一个大网站用一大堆HACK的。

TOP

刚用了
*  *+ 都过不了验证
宽己之心宽人,责人之心责己-----天地宽矣!

TOP

为什么浏览器厂商要让我们这么辛苦的兼容这么多浏览器?IE7对许多CSS2的不兼容,不知道是不是MS有意这样做的。
在迷茫中前进...

TOP

支持标准

TOP

[xmlns] 我也比较喜欢是IE7以下不认识,IE7还是认识的.
我的淘宝店:http://shop58394963.taobao.com/,中奖也不信
对管理有异议,请前往事务区进行投诉。请勿PM。

TOP

楼主真好,你咋知道俺喜欢吃现成的昵?
收录以备查阅行不?

人上感觉这些东西还是少用的好,所以一直也没好好学习这些HACK。
不过,有时候不用还真不行,也该好好学习一下了
[渡江舟]-起航

TOP

引用:
原帖由 Arsan 于 2007-5-28 10:55 发表
支持标准
您滴MY blog链接少了一点,是故意滴么?
[渡江舟]-起航

TOP

屏蔽ie的问题

代码:
div {width:200px;height:200px;border:1px solid #333;}
*:lang(zh) #aa {background-color:#f60!important;}

<div id="aa"></div>

测试环境:
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4


在我环境下测试div不显示背景?大家来看看!

TOP

慢慢看。

TOP

+color:yellow!important;  color:#000;  _color:red;

这个就行了.
沈阳人在北京QQ群:23513264

TOP

引用:
原帖由 pazz 于 2007-6-8 11:56 发表
代码:
div {width:200px;height:200px;border:1px solid #333;}
*:lang(zh) #aa {background-color:#f60!important;}



测试环境:
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.4) Gec ...
同样。感觉这个方法貌似有点问题。。

TOP

:) :) :)

TOP

引用:
原帖由 mycggo 于 2007-5-28 10:18 发表
为什么浏览器厂商要让我们这么辛苦的兼容这么多浏览器?IE7对许多CSS2的不兼容,不知道是不是MS有意这样做的。
什么是时候ie 浏览器能都 遵循统一标准啊....兼容浏览器刚开始写css hack 头大了,,,呵....
One World

TOP

很好,感谢LZ汇总

TOP

能统一起来就好了,现在IE7出来后我们要兼顾三个浏览器了,真的是痛苦啊,IE6和7同时安装又是个问题,唉。

TOP

不到万不得已 不会用这个的

还是多考虑下使用好的结构XHTML 配以好的CSS文档吧
无比巨大的理论威力、思想锋芒和战斗精神!

TOP

浏览器啊!
好好研究他们的兼容性了!

TOP

我基本只用过!important
暂时没有遇到过什么问题.
该用户已通过绿坝认证 
(粤绿备)法克马勒戈壁号

TOP

用hack ,css校验通不过

TOP

多谢。不错。

TOP

to LZ
<!--[if ie]>
仅IE可见
<![endif]-->
<!--[if ie 7]>
仅IE7可见
<![endif]-->
<!--[if lt(gt) ie 7]>
IE 7 以下(以上)可见
<![endif]-->
<!--[if lte(gte) ie 7]>
IE 7 且以下(以上) 可见
<![endif]-->


to #16
<body lang="zh">
</body>

TOP

html/**/ >body  select {……}
这个hack是针对非IE6用的

TOP