CSS Hack汇总快查

小毅 楼主

屏蔽IE浏览器（也就是IE下不显示）

1. *:lang(zh) select {font:12px  !important;} /*FF 可见，特别声明：由于Opera最新的更新，此句目前已经成为FF的专用HACK*/
   
2. select:empty {font:12px  !important;} /*safari可见*/
   
3. 这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

复制代码

仅IE7识别

1. *+html  {…}
   
2. 当面临需要只针对IE7做样式的时候就可以采用这个HACK。

复制代码

IE6及IE6以下识别

1. * html  {…}
   
2. 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
   
3. html/**/ >body  select {……}
   
4. 这句与上一句的作用相同。

复制代码

仅IE6不识别

1. select { display /*IE6不识别*/:none;}
   
2. 这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

复制代码

仅IE6与IE5不识别

1. select/**/ { display /*IE6,IE5不识别*/:none;}
   
2. 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

复制代码

仅IE5不识别

1. select/*IE5不识别*/ { display:none;}
   
2. 这一句是在上一句中去掉了属性区的注释。只有IE5不识别

复制代码

盒模型解决方法

1. selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
   
2. 盒模型的清除方法不是通过!important来处理的。这点要明确。

复制代码

清除浮动

1. select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
   
2. 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。

复制代码

截字省略号

1. select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
   
2. 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

复制代码

只有Opera识别

1. @media all and (min-width: 0px){ select {……}  }
   
2. 针对Opera浏览器做单独的设定。

复制代码

以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见

1. @media tty {
   
2. i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
   
3. }/* */

复制代码

IE5/MAC的过滤器，一般用不着

1. /*\*//*/
   
2.     @import "ie5mac.css";
   
3. /**/

复制代码

IE的if条件Hack

1. <!--[if IE]> Only IE <![endif]-->
   
2. 所有的IE可识别
   
3. <!--[if IE 5.0]> Only IE 5.0 <![endif]-->
   
4. 只有IE5.0可以识别
   
5. <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
   
6. IE5.0包换IE5.5都可以识别
   
7. <!--[if lt IE 6]> Only IE 6- <![endif]-->
   
8. 仅IE6可识别
   
9. <!--[if gte IE 6]> Only IE 6/+ <![endif]-->
   
10. IE6以及IE6以下的IE5.x都可识别
    
11. <!--[if lte IE 7]> Only IE 7/- <![endif]-->
    
12. 仅IE7可识别

复制代码

以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

原文出处：毅博客

[ 本帖最后由 小毅 于 2007-5-28 13:59 编辑 ]

261509559

加上
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

csshack是个好东西，可偶还是不喜欢他，好变态的东西。

blank

其实俺还是喜欢大家去看CSS HACK表，这样更容易全面理解

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

比如：
*+html  {…}

IE5也识别的

liukangIDEA

有点不理解~~~

3archer

辛苦了,其实以前W3C.CN就已经有一个hack表,


...就是3楼那个
还是太浮躁了!

richiepu

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

hero4u

css hack hack多了，反而糊涂了，呵呵。

258795093

加个[xmlns] #as{}
IE不识别

myolie

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

colinivy

刚用了
*  *+ 都过不了验证

mycggo

为什么浏览器厂商要让我们这么辛苦的兼容这么多浏览器？IE7对许多CSS2的不兼容，不知道是不是MS有意这样做的。

Arsan

支持标准

kuhanzhu

[xmlns] 我也比较喜欢是IE7以下不认识,IE7还是认识的.

ferryboat401

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

人上感觉这些东西还是少用的好，所以一直也没好好学习这些HACK。
不过，有时候不用还真不行，也该好好学习一下了

ferryboat401

原帖由 Arsan 于 2007-5-28 10:55 发表
支持标准

您滴MY blog链接少了一点，是故意滴么？

pazz

代码：
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不显示背景？大家来看看！

leafage2006

慢慢看。

wangning886111

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

这个就行了.

ahwing

原帖由 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 ...

同样。感觉这个方法貌似有点问题。。

loveguan

:) :) :)

buildcold

原帖由 mycggo 于 2007-5-28 10:18 发表
为什么浏览器厂商要让我们这么辛苦的兼容这么多浏览器？IE7对许多CSS2的不兼容，不知道是不是MS有意这样做的。

什么是时候ie 浏览器能都 遵循统一标准啊....兼容浏览器刚开始写css hack 头大了,,,呵....

Replace

很好，感谢LZ汇总

ling3492

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

oivp

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

还是多考虑下使用好的结构XHTML 配以好的CSS文档吧

john1204

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

凉爽

我基本只用过!important
暂时没有遇到过什么问题.

fbr1002

用hack ，css校验通不过

mail25

多谢。不错。

hellonicholas

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>

aeoluszzf

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