CSS Hack汇总(转载)

CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表，显示了各浏览器对css hack的支持程度，对我们制作兼容网页非常有帮助。

现在浏览器的市场99%的份额被 IE 和 FF 所占 .所以,现在的hack应该主要针对这两个浏览器的了

现在主流的浏览器是 IE6 和 Firefox ,这两个不同的浏览器的内核是不一样的. 同时,这两个浏览器对CSS2.0 在某些细节上的理解也不一样.因此,就有必要针对这两个浏览器制定一些不同的代码.

       于是,就有了 CSS hack 技术了 当然,njuptsoz 认为 ,随着时间的推荐,WEB标准的推进,这种 hack技术最终是会消亡的,这一点从IE7就可以看出来.但是,目前的市场还是 IE6 和 FF 的天下,所以, 现在来讨论 hack技术,还是十分的必要和必须的!

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

*:lang(zh) select {font:12px !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别

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

仅IE7可以识别

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

IE6及IE6以下识别

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

仅IE6不识别，屏蔽IE6

select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

仅IE6与IE5不识别，屏蔽IE6与IE5

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

仅IE5不识别，屏蔽IE5

select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

盒模型解决方法

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的作者们。

、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。

2、浏览器特定的选择器

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。

IE6以下

   *html{}

IE 7 以下

*:first-child+html {} * html {}

只对IE 7

*:first-child+html {}

只对IE 7 和现代浏览器

html>body {}

只对现代浏览器(非IE 7)

html>/**/body {}

最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

要使用这些选择器，请在样式前写下这些代码。例如：

#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重写上面的代码并且把宽度改为250PX
在IE6以下版本中适用。 */

3、在IE6中使用透明PNG图片

IE6的一个很难处理的BUG就是它不支持透明PNG图片。

你可能需要用一个重写的CSS的滤镜来解决这个问题：

*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}

8、最小宽度

IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用，特别是对于100%宽度的可变模板来说，因为他告诉浏览器停止收缩。

对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如：

.container {
min-width:300px;
}

要让这些在IE6下起作用的话你要添加额外的努力！你需要创建两个DIV，一个包含着另一个。

<div class=”container”>
<div class=”holder”>Content</div>
</div>

然后你需要设置外面层的min-width：

.container {
min-width:300px;
}

现在又要IE hack起作用了，你需要写下以下代码：

* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时，这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

9、隐藏水平滚动

要去除水平滚动条，可以在body中插入overflow-x:hidden属性。

body {
overflow-x: hidden;
}

这在你决意要用一个比浏览器款的图片或Flash时很有用。

4、去掉连接虚线框

当你点击链接时，Firefox会在链接周围产生一个虚线外框。

这个很好解决，只需在a标签中添加outline:none就可以了。

a{
   outline:none;
}

5、对inline元素应用宽度。

如果你对一个inline元素使用宽度，它将只在IE6下起作用。

所 以的HTML标签要么是Block的要么就是inline的。inline属性的标签 有<span><a><strong>和<em>Block标签包 括<div><p><h1><form>和<li>

你不能控制inilne标签的宽带，不过有一个方法是把标签属性从inline改为Block。

span{
   width:150px;
   display:block;
}

应用display:block能够把span标签变成block标签，从而控制它的宽度。

6、使一个固定宽度的网站居中。

为了让你的网站在浏览器中居中，可以为最外层Div添加position:relative属性，然后将margin设为auto。

#wrapper {
margin: auto;
position: relative;
}

7、图片替换技术

对于头部来说，永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用，尽管依然使用很普通的文字，这可以联想到所有的优点。

HTML：

<h1><span>Main heading one</span></h1>

CSS:

h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}

正如你所见，我们对H1标签使用普通的HTML代码，用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处，从而用户看不到它们。

什么是CSS hack
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线_和星号*，IE7能识别星号*，当不能识别下划线_，而firefox两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSS Hack
比如要分辨IE6和firefox两种浏览器，可以这样写：

<style>  
div{   
    background:green; /* for firefox */   
    *background:red; /* for IE6 */   
}   
</style>  
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是红色的，在firefox中看到是绿色的。</div>

解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了

区别IE6与FF：
       background:orange;*background:blue;

区别IE6与IE7：
       background:green !important;background:blue;

区别IE7与FF：
       background:orange; *background:green;

区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6 IE7 FF
* √ √ ×
!important × √ √

hack 一词在网络上相当常用，一般是指对程序或系统进行非官方的修改，或是非官方的补丁，被称之为hack，当然hacker就是指黑客了，css hack也可以理解为css黑客程序，是指一种改善css在不同浏览器下表现形式的技巧方法。csshack技术是通过一些浏览器特殊支持或不支持的语 句，使一个css样式能够被浏览器解析或不能被浏览器解析。

css hack用于对不同浏览器区别处理，这样就做到了针对一些浏览器之间的显示问题进行单独的样式设计进行修复，关于如何使用css hack，举一个非常简单的例子，例如css中的导入样式表语句—@import，@import语句是IE5之后才被IE所认同的一个命令，因此如果使用@import导入样式表，这些样式表只有IE5才能看到，IE4是没有办法解析，因此我们利用此方法编写样式代码：
@import url("newstyle.css");
body {
font-size:14px;
}

我们在newstyle.css中做如下编码：
body {
font-size:18px;
}

最 终在浏览网页时，如果使用IE4浏览器，将使用字体大小为14px，而如果使用IE5及以上版本浏览器时，将显示为18px的字体。这就是csshack 的基本应用形式，通过一些浏览器之间特殊命令来实现样式的隐藏与显示，在这里针对IE4及IE4以上版本浏览器做了字体样式的区分，从而达到了hack的 目的。