CSS 入门教程 你想知道的css hack知识全都帮你整理好了

写 CSS 样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即 CSS hack。

不同的浏览器对 CSS 的解析结果是不同的，因此会导致相同的 CSS 输出的页面效果不同，这就需要 CSS hack来解决浏览器局部的兼容性问题。

使用 CSS hack会导致部分CSS 代码在某些浏览器中无效，因此可以利用条件样式，在符合条件的浏览器中使用特定的 CSS 代码覆盖原来的 CSS 代码。

CSS hack不仅可以解决浏览器兼容性问题，还可以让我们针对不同版本的浏览器编写定制化的CSS效果。

css hack基本概念

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack 就是让你记住这个标准），以达到应用不同的 CSS 样式的目的。

比如

.kwstu{
    width:300px;
    _width:200px;
}

一般浏览器会先给元素使用 ​width:300px; ​的样式，紧接着后面还有个​_width:200px; ​由于下划线 ​_width​ 只有 IE6 可以识别，所以此样式在 IE6 中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别​_width ​不会执行 ​_width:200px;​ 这句样式，所以在其他浏览器中设置对象的宽度就是 300px;

简单地讲， CSS hack 指各版本及各品牌浏览器之间对 CSS 解释后出现网页内容的误差(比如我们常说错位)的处理。由于各浏览器的内核不同，所以会造成一些误差。就像 JS 一样，一个 JS 网页特效，在微软 IE6、IE7、IE8 浏览器有效果，但可能在火狐（Mozilla Firefox）或者谷歌浏览器无效，这种操作就叫做 JS hack 。对于 CSS 来说，解决各浏览器对 CSS 解释不同所采取的区别不同浏览器制作不同的 CSS 样式的设置来解决这些问题就叫作 CSS Hack。

CSS Hack常见的有三种形式：CSS 属性 Hack、CSS 选择符 Hack 以及 IE 条件注释 Hack， Hack 主要针对IE 浏览器。

1、属性级 Hack：比如 IE6 能识别下划线_和星号* ，IE7 能识别星号* ，但不能识别下划线_，而 firefox 两个都不能认识。

2、选择符级 Hack：比如 IE6 能识别 *html .class{}，IE7能识别 *+html .class{} 或者 *:first-child+html .class{}。

3、IE 条件注释 Hack：IE条件注释是微软从 IE5 开始就提供的一种非标准逻辑语句。比如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>，针对 IE6 及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。

PS：条件注释只有在 IE 浏览器下才能执行，这个代码在非 IE 浏览下被当做注释视而不见。可以通过IE条件注释载入不同的 CSS、JS、HTML 和服务器代码等。

提示：有个 CSS hack 三种常见形式的更多解释，你可以查阅《CSS3学习笔记》的“CSS hack合集”部分的内容。

各浏览器下 Hack 的写法

1、Firefox

@-moz-document url-prefix() { .selector { property: value; } }
//上面是仅仅被Firefox浏览器识别的写法，具体如：
@-moz-document url-prefix() { .demo { color:lime; } }
//支持Firefox的还有几种写法：
/* 支持所有firefox版本 */
#selector[id=selector] { property: value; }
或者：
@-moz-document url-prefix() { .selector { property: value; } }
/* 支持所有Gecko内核的浏览器 (包括Firefox) */
*>.selector { property: value; }

2、Webkit 内核核浏览器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：
@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3、Opera 浏览器

html:first-child>body Selector {property:value;} 或者： @media all and (min-width:0) { Selector {property: value;} } 或者： @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }

上面则是Opera浏览器的Hack写法：
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4、IE9浏览器

:root Selector {property: value9;}
上面是IE9的写法，具体应用如下：
:root .demo {color: #ff09;}

5、IE9以及IE9以下版本

Selector {property:value9;}
这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：
.demo {background: lime9;}

6、IE8浏览器

@media \0screen{

Selector {property: value;} }

7、IE8以及IE8以上的版本

Selector {property: value\0;}
这种写法只有IE8以及IE8以上版本支持，如
.demo {color: #ff0;}

8、IE7浏览器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
上面两种是IE7浏览器下才能识别，如：
*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}

9、IE7及IE7以下版本浏览器

Selector {*property: value;}
上面的写法在IE7以及其以下版本都可以识别，如：
.demo {*background: red;}

10、IE6浏览器

Selector {_property/**/:/**/value;} 或者： Selector {_property: value;} 或者： *html Selector {property: value;}
具体应用如下：
.demo {_width/**/:/**/100px;} 或者： .demo {_width: 100px;} 或者： *html .demo {width: 100px;}
上面具体介绍了各种版本浏览器下如何识别各种的Hack写法，包括了IE6-9以及现代版本的浏览器写法。综合上面的所述，我们针对不同浏览器的Hack写法主要分为两种从CSS选择器和CSS属性上来区别不同的Hack写法。

慎用\0的CSS Hack

在 Web 页面制作中尽量不要使用 CSS Hack 来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合 W3C 的某些要求，或者说违背了浏览器的某些规则而造成的，所以我们应该尽量通过结构或 CSS 的修改来达到各浏览器渲染一致效果，除非到了万不得已情况下，才考虑CSS的Hack。

网上许多与 CSS Hack 相关的文章中说，在 CSs 的属性值和分号之间添加字符 \0，可以实现对 IE 8 或 IE 9的 CSS hack (有的说，仅支持 IE8)。
网上的示例是这样的：

.css-hack {
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
    +color: green; /* IE7 显示绿色 */
    _color: brown; /* IE6 显示棕色 */
}

通过实际测试发现，关于使用字符 \0 实现的上述 CSS Hack 有3点需要注意。
1、IE10 也能够识别添加了字符 \0 的 CSS 属性值(笔者这里没有 IE 11，不知道 IE 11 是否也能识别)。
2、属性值和 \0 之间不能有空格，有一个空格的话(例如：blue \0)，在 IE 8 中就失效了，仅对 IE 9/IE 10有效。
3、如果我们只想对 IE 8/IE 9进行CSS Hack 呢？这个时候，我们去掉后面两行与 IE6、IE7 有关的代码。

.css-hack {
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
}

这个时候，在 IE 6、IE 7 浏览器中，你会发现你看到的不是红色，而是黑色(也就是默认的字体颜色)！
这是因为一般浏览器的思路是，先过滤掉无效的css属性值，然后再从正确的属性设置中根据优先级获取最后面的css属性值。而 IE 6/7 浏览器不是先过滤掉无效的属性值，而是先根据优先级，获取最后面的 CSS 属性值，然后再来判断该属性值是否，无效就忽略掉。因此，如果按照网上所说，仅仅使用 \0 来实现 IE 8+ 的 CSS Hack，则会对 IE6/7 中的显示效果造成破坏。你必须通过额外的css属性设置来复原IE6/7的样式。
因为，我们不能够简单地下结论说，使用 \0 可以实现对 IE 8、IE 9 甚至 IE 10 +的 CSS Hack。

浏览器识别字符标准对应表

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

从上表可以分析出以下几种情况：

1.大部分特殊字符 IE 浏览器支持，其他主流浏览器 firefox，chrome，opera，safari不支持 (opera 可识别除外)。
2. \9 ：所有 IE 浏览器都支持
3. _和- ：仅 IE6 支持
4. * ：IE6、E7 支持
5. \0 ：IE8、IE9 支持，opera 部分支持
6. \9\0 ：IE8 部分支持、IE9 支持
7. \0\9 ：IE8、IE9 支持

css hack兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不会.(可用 !important 解决)

2, 居中问题
①.垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
②.水平居中. margin: 0 auto;(当然不是万能)

3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题

5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE

针对 firefox ie6 ie7 的 css 样式

现在大部分都是用 !important 来 hack，对于 ie6 和 firefox 测试可以正常显示，但是 ie7 对 !important 可以正确解释，会导致页面没按要求显示！找到一个针对 IE7 不错的 hack 方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

那么在 firefox 下字体颜色显示为#333，IE6 下字体颜色显示为 #666，IE7 下字体颜色显示为#999。

CSS 布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。

但在 mozilla 中不能居中。解决办法就是在子元素定义时候设定时再加上margin-right: auto;margin-left: auto;

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，你可以依次拆出多个div，
只要在每个拆出的 div 里定义 margin-right: auto;margin-left: auto; 就可以了。
盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

浮动 IE 产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下 block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

IE 不认得 min-这个定义，但实际上它把正常的 width和 height 当作有 min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width和 min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

页面的最小宽度

min-width是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个<div>放到 <body>标签下，然后为 div 指定一个类：

然后 CSS 这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}

第一个min-width是正常的；但第2行的 width使用了 JavaScript，这只有IE才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。

清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}

或者加入 :after（伪对象）,设置在对象后发生的内容，通常和 content配合使用，IE 不支持此伪对象，非 IE 浏览器支持，

所以并不影响到 IE/WIN 浏览器。这种的最麻烦的……

#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

属性选择器(这个不能算是兼容,是隐藏 CSS 的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的。

IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin或 padding时。

例：

实例

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在 P 对象上下各加 2个空的 div 对象 CSS 代码：.1{height:0px;overflow:hidden;}或者为 DIV 加上 border 属性。