CSS Hack汇总

合集下载

csshack原理及常用hack

csshack原理及常⽤hack原理：利⽤不同浏览器对CSS的⽀持和解析结果不⼀样编写针对特定浏览器样式。

常见的hack有1）属性hack。

2）选择器hack。

3）IE条件注释IE条件注释：适⽤于[IE5, IE9]常见格式如下选择器hack：不同浏览器对选择器的⽀持不⼀样/***** Selector Hacks ******//* IE6 and below */* html #uno { color: red }/* IE7 */*:first-child+html #dos { color: red }/* IE7, FF, Saf, Opera */html>body #tres { color: red }/* IE8, FF, Saf, Opera (Everything but IE 6,7) */html>/**/body #cuatro { color: red }/* Opera 9.27 and below, safari 2 */html:first-child #cinco { color: red }/* Safari 2-3 */html[xmlns*=""] body:last-child #seis { color: red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #siete { color: red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho { color: red }/* saf3+, chrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) {#diez { color: red }}/* iPhone / mobile webkit */@media screen and (max-device-width: 480px) {#veintiseis { color: red }}/* Safari 2 - 3.1 */html[xmlns*=""]:root #trece { color: red }/* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*=""] #catorce { color: red }/* Everything but IE6-8 */:root *> #quince { color: red }/* IE7 */*+html #dieciocho { color: red }/* Firefox only. 1+ */#veinticuatro, x:-moz-any-link { color: red }/* Firefox 3.0+ */#veinticinco, x:-moz-any-link, x:default { color: red }属性hack：不同浏览器解析bug或⽅法1/* IE6 */2 #once { _color: blue }34/* IE6, IE7 */5 #doce { *color: blue; /* or #color: blue */ }67/* Everything but IE6 */8 #diecisiete { color/**/: blue }910/* IE6, IE7, IE8 */11 #diecinueve { color: blue\9; }1213/* IE7, IE8 */14 #veinte { color/*\**/: blue\9; }1516/* IE6, IE7 -- acts as an !important */17 #veintesiete { color: blue !ie; } /* string after ! can be anything */。

前端hack写法

在前端开发中，"hack"通常指的是为了解决特定浏览器或版本之间的差异或限制而采取的技巧或方法。

由于不同的浏览器对CSS和JavaScript的解析和实现方式可能存在差异，因此需要使用一些hack来确保代码在所有浏览器中都能正常工作。

以下是一些前端hack的写法：CSS HacksCSS Hacks通常用于解决不同浏览器之间的样式差异。

例如，可以使用条件注释（Conditional Comments）来为IE浏览器添加特定的样式：html另外，还可以使用属性选择器或特定选择器来针对某些浏览器进行样式调整。

例如，以下选择器仅适用于IE8及以下版本：cssinput[type="button"], input[type="submit"] {/* IE8及以下版本的样式*/}JavaScript HacksJavaScript Hacks通常用于解决不同浏览器之间的JavaScript实现差异。

例如，可以使用条件语句来检查浏览器的类型和版本，并据此执行不同的代码：javascriptif (erAgent.indexOf("MSIE") !== -1) {// IE浏览器特定的代码} else if (erAgent.indexOf("Chrome") !== -1) {// Chrome浏览器特定的代码}另外，还可以使用polyfill库来填补某些浏览器缺少的JavaScript功能。

例如，可以使用Array.prototype.filter polyfill来填补IE8及以下版本中缺少的Array.prototype.filter方法。

浏览器兼容css-Hack写法汇总

虽然和大家在学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。

”下面我们先来简单的了解一下什么是CSS Hack。

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。

然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。

总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。

常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。

下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。

下面是我收集有关于各浏览器下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浏览器Selector {property: value/;}或者：广州活动策划公司@media �screen{Selector {property: value;}}上面写法只有IE能识别，如：.color {color: #fff/;}或者：@media �screen{.color {color: #fff;}}7、IE8以及IE8以上的版本Selector {property: value�;}这种写法只有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以及现代版本的浏览器写法。

IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

小知识：什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

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

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

各浏览器CSS hack兼容表：代码示例：#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例：.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明：1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。

3、还有其他写法，比如：*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：/TR/html4/loose.dtd5、顺序：Firefox、IE8、IE7、IE6依次排列。

ie10中的css hack方式

ie10中的css hack方式IE10中的CSS Hack方式在开发网页的过程中，我们经常会遇到兼容性问题，特别是在旧版本的IE浏览器中。

为了解决这些问题，我们常常需要使用CSS Hack来针对不同版本的IE浏览器进行特定的样式调整。

本文将介绍IE10中常用的CSS Hack方式。

1. 条件注释条件注释是一种只在特定版本的IE浏览器中生效的CSS Hack方式。

在IE10中，可以通过以下方式来使用条件注释：```css```在这种方式中，只有在IE10浏览器中才会解析注释内的样式代码，其他浏览器会忽略这部分代码。

2. 属性前缀IE10中也可以使用属性前缀的方式来实现特定样式的适配。

例如，我们可以使用“\9”来针对IE10进行样式调整：```css.selector {color: red\9; /* 只在IE10中生效 */}```这样设置的样式只会在IE10中生效，其他浏览器会忽略属性后面的“\9”。

3. @media查询在IE10中，@media查询可以用来针对不同的浏览器进行样式调整。

例如，我们可以使用@media查询来针对IE10进行特定的样式设置：```css@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.selector {/* IE10特定的样式 */}}```这样设置的样式只会在IE10中生效，其他浏览器会忽略这部分代码。

4. 选择器前缀在IE10中，我们也可以使用选择器前缀的方式来实现特定样式的适配。

例如，我们可以使用“:root”来针对IE10进行样式调整：```css:root .selector {/* IE10特定的样式 */}```这样设置的样式只会在IE10中生效，其他浏览器会忽略选择器前缀的部分。

CSSHack的一些写法

CSSHack的⼀些写法参与测试的浏览器：IE6，IE7，IE8，IE9 Preview，Firefox 3.67，Safari 5.0和Opera 10.0以下是IE系列的Hack写法（注意顺序）：.color {color:#000;/* 所有浏览器⽀持 */color:grey !important;/* 除IE6外，所有浏览器都⽀持 */color:red\9;/* IE系列浏览器(ie6+)⽀持，但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */color:orange\0;/* IE8⽀持 */*color:yellow;/* IE6,IE7⽀持 */+color:#C0C;/* IE6,IE7⽀持 */_color:blue;/* IE6⽀持 */}运⾏结果为：IE6⽂字颜⾊blue，IE7为#C0C，IE8为orange，其他浏览器（包括IE9 Preview）均为grey此外，IE7⽀持如下写法：*+html .bgcolor {background-color:#FF99CC;/* 仅IE7⽀持“*+html” */}下⾯是IE6、IE5的⼀些写法（注意注释的摆放位置）：html/* 注释 */>body .ie6 {border:1px dashed #CCC;/* IE6，IE5⽀持 */}.nie6 {display:/* 注释 */none;/* IE6不⽀持 */}.nie56/* 注释 */ {display:/* 注释 */none;/* IE6，IE5不⽀持 */}除此之外，我们在使⽤浮动布局的时候，⼀个div块包含两个浮动的div块，往给这个⽗div块添加如下代码以清除浮动：#box:after {/* 清除浮动,但IE6和IE7不⽀持 */content:".";display:block;height:0;clear:both;visibility:hidden;}但遗憾的是，这种⽅法IE6、IE7不识别，往往我们使⽤在两个⼦div后添加空的div以清除浮动。

CSS hack总汇

1. * 符号2. !importantIE7 不但能识别* 符号，还能识别!important，而IE6 只能识别前者。

例：在IE6 和IE7 中呈现不同的文字颜色：4. *html 和*+html屏蔽IE浏览器（也就是IE下不显示）*:lang(zh) select {font:12px !important;} /*FF,可见，特别提醒：由于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不识别，屏蔽IE6select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

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

不屏蔽IE5.5仅IE5不识别，屏蔽IE5select/*IE5不识别*/ {…}这一句是在上一句中去掉了属性区的注释。

只有IE5不识别，IE5.5可以识别。

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

css集csshack

css集—— CSS Hack* 这里只列举一些使用比率较高的常用CSS Hack，且不考虑IE6以下的版本。

* CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的。

所以对浏览器的选择大致可以分为能力选择和怪癖选择(BUG)。

能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG。

* 友情提示：尽量找到通用方法而减少对CSS Hack的使用，大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题。

一、条件Hack?语法：取值：<keywords>if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本是否：指定是否IE或IE某个版本。

关键字：空大于：选择大于指定版本的IE版本。

关键字：gt（greater than）大于或等于：选择大于或等于指定版本的IE版本。

关键字：gte （greater than or equal）小于：选择小于指定版本的IE版本。

关键字：lt（less than）小于或等于：选择小于或等于指定版本的IE版本。

关键字：lte（less than or equal）非指定版本：选择除指定版本外的所有IE版本。

关键字：!<version>目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上IE10及以上版本已将条件注释特性移除，使用时需注意。

说明：用于选择IE浏览器及IE的不同版本if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）二、属性级Hack语法：selector{<hack>?property:value<hack>?;}取值：_：选择IE6及以下。

最全的CSShack没有之一

最全的CSShack没有之⼀1、何为HACK？简单的说，HACK就是只有特定浏览器才能识别这段hack代码。

Hack也可以说是让前端最为头疼的问题，因为要写N多种兼容代码。

当然，IE是最让⼈蛋疼的。

⼀般来说，CSS HACK有3种表现形式：CSS属性前缀法：：⽐如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox对前⾯三个都不能认识。

CSS选择器前缀法：⽐如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

IE条件注释法：针对所有IE，。

⽐如：针对IE6及以下版本： 。

这类Hack不仅对CSS⽣效，对写在判断语句⾥⾯的所有代码都会⽣效(注：IE10+已经不再⽀持条件注释)。

下⾯将对这三种形式⼀⼀分析！2、CSS 属性前缀法这⾥提供⼀个测试实例（所有下⾯的代码都可以在这个实例⾥找到）：（1）IE6（_）.test1 { _color: red; }（2）IE7及其以下版本（*）如下设置，IE7及其以下版本中都会⽣效：.test2 { *color: yellow; }如果是在选择器上设置，则只会在IE6中⽣效：*html .test { color: gold; }（3）IE6/IE7/IE8（\9）⽹上的资料说只有IE6/IE7/IE8中⽣效，可是经测试，在IE9/IE10中也同样⽣效（如果知道原因的，请告知）：.test3 { color: purple\9; }（4）IE8/IE9/IE10/IE11（\0）在IE8/IE9/IE10/IE11中⽣效：.test4 { color: green\0; }（5）IE6（-）在IE6中⽣效：.test5 { -color: pink; }（6）IE6/IE7（+）在IE6/IE7中⽣效：.test6 { +color: gold; }（7）IE6/IE7（*+）如果在类的属性上加，会在IE6/IE7都⽣效：.test7 { *+color: blue; }如果在选择器上加，只会在IE7⽣效：*+html .test { color: black; }（8）!important除了IE6，其他浏览器中都⽣效：.test8 { color: #fff !important; }（9）IE9/IE10（\9\0）.test9 { color: orange\9\0; }⼀般写HACK的顺序：从最新版本到低版本，⽐如：新版本、IE（10/9/8）、IE（7/6）color: black; /* 所有 */color: white !important; /* 除了IE6外 */color: orange\9\0; /* IE 9/10 */color: green\0; /* IE 8/9/10 */*color: yellow; /* IE6/7 */+color: gold; /* IE6/7 */*+color: blue; /* IE6/7 */_color: red; /* IE6 */3、CSS选择器前缀法（1）*只在IE6中⽣效：*html .test21 { color: gold; }（2）*+只在IE7中⽣效：*+html .test22 { color: blue; }（3）IE6/IE7在IE6/IE7中⽣效：@media screen\9 {.test23 { color: purple; }}（4）IE6/IE7/IE8在IE6/IE7/IE8中⽣效：@media \0screen\,screen\9 {.test24 { color: gold; }}（5）IE8在IE8中⽣效：@media \0screen {.test25 { color: orange; }}（6）IE8/IE9/IE10/IE11在IE8/IE9/IE10/IE11中⽣效：@media screen\0 {.test26 { color: green; }}（7）IE9/IE10/IE11在IE9/IE10/IE11中⽣效：@media screen and (min-width: 0\0) {.test27 { color: red; }}4、条件注释下⾯的N表⽰版本。

css hack

3.浮动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;
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
15. LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器 <style type="text/css">  </style>
14.web标准中定义id与class有什么区别吗一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

IE6常见CSS解析Bug及hack-好程序员

IE6常见CSS解析Bug及hack-好程序员1.默认高度（IE6）描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）hack1:给元素添加声明：font-size:0;hack2：给元素添加声明：overflow:hidden;2.图片有边框BUG ,当图片加在IE上会出现边框Hack:给图片加border:0;或者border:none;3.图片间隙,div中的图片间隙BUG描述：在div中插入图片时，图片会将div下方撑大大约三像素。

hack1:将与写在一行上；ie6hack2:将转为块状元素，给添加声明：display:block;hack3:给图片添加vertical-align:top/middle/bottom.4. 双倍浮向（双倍边距）（只有IE6出现）描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。

hack:给浮动元素添加声明：display:inline;5.表单元素行高对齐不一致描述：表单元素行高对齐方式不一致hack:给表单元素添加声明：float:left;6.按钮元素默认大小不一描述：各浏览器中按钮元素大小不一致hack1：统一大小/（用a标记模拟）hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可7.百分比bug描述：在IE7及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

(也会受系统影响）hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。

8.鼠标指针bug描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

web前端规范之CSS Hack

浏览器的阵型：此文档将浏览器分为IE阵型和Webkit阵型。

IE阵型包括：微软的IE6、IE7、IE8、IE9，国内在此内核扩展的360、搜狗、遨游、世界之窗、腾讯TT浏览器、瑞影、百度浏览器、瑞星浏览器、糖果、GreenBrowser、飞腾、闪游、中易等。

Webkit 阵型包括：Mozilla Friefox（Mozilla开源组织）、Chrome（google公司）、Safari（苹果公司）、Oprea（挪威开发商、中文翻译为…欧朋‟）等等。

!国内外用户使用习惯：由于微软windows操作系统（系统默认附带IE浏览器）在中国大陆的历史原因，目前国人使用的浏览器大部分都是IE内核的浏览器，包括：IE6、IE7、IE8、IE9、360、搜狗、遨游、腾讯TT、世界之窗等。

其中360和搜狗的市场份额最大。

可以这样看，旧版本的国产浏览器是站在IE阵型的（类似于java和.net阵型），但是现在的新版本的国产浏览器，比如360和遨游，它既有IE内核的特性，又兼顾了Webkit 特性的双重体验。

举一个例子，新版遨游浏览器同样支持CSS3的圆角和投影显示。

在国外，由于版权意识等原因，老外使用Webkit内核浏览器居多。

最新数据显示，chrome 超越了ie 的市场份额。

什么是CSS Hack？由于不同的浏览器，比如IE 6，IE 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，不同内核的浏览器之间页面效果存在差异。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中实现页面效果的一致性。

针对不同的浏览器写不同的CSS Code的过程，就叫CSS hack。

我们写ie 和firefox 的css hack，可以认为，兼容火狐浏览器，一般情况下都会兼容chorme、oprea、safari浏览器。

firefox和它们还是有细微的区别，如果html和css 结构规范，一般情况下还是可以认为：兼容firefox，即兼容了chrome、oprea、safari，因为它们是同一个阵型的。

css Hack

CSS hack分类
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即 HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7 能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但 firefox前述三个都不能认识。
CSS hack方式三：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background:
1 / CSS hack简介 2 / hack的分类 3 / 透明度处理 4 / 创客学院首案例

CSS hack用法大全(举例详解)

IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）
另外再补充一个，下划线"_",
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。
3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】：「*」、「_」
【示例】：
#divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
</head>
<body>
你正在使用：



<br><br>
【区别符号】：「*」、「!important」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/

CSS书写和CSS HACK技巧分享

CSS书写和CSS HACK技巧分享不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSSHack来解决浏览器局部的兼容性问题。

而这个针对不同的浏览器写不同的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：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE 浏览下被当做注释视而不见。

可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

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

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

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

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。

我们就可以根据这个来针对不同的浏览器来写不同的CSS。

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

css hack手册集合

CSS hack 完全手册( IE5.5 IE6 IE7 FF Opera Safari Chrome )Comments 区别IE和w3c的方法.hack {width:600px; /* FF */* width:700px; /* IE */}——————————————————————————–区别IE5.5、IE6、IE7、w3c.qq{background:#f00; /* w3c*/*background:#00f!important; /* IE7 */_background:#0f0; /* IE6 */_background /**/:#ccc /* IE5.5 */}——————————————————————————–针对Opera、Safari 、Chrome.qq { background: #000; } /* IE FF */@media all and (min-width:0px){.qq { background: #000; } /* Opera、Safari 、Chrome */}ChromeCSSFirefoxhackIEOperaSafari如何实现FireFox文本自动换行七月5th, 2008 2 Comments FireFox文本自动换行处理，如何实现FireFox文本自动换行文本自动换行IE中解决方法：word-wrap:break-word;word-break:break-all;注：在要换行的内容相应的单元格或者DIV里加入，如：<div style=word-wrap:break-word;></div>或<td style=word-wrap:break-word;></td> 文本自动换行FireFox中解决方法（脚本）：<script type=‖text/javascript‖>function toBreakWord(intLen, id){var obj=document.getElementById(id);var strContent=obj.innerHTML;var strTemp=‖";while(strContent.length>intLen){strTemp+=strContent.substr(0,intLen)+‖<br>‖;strContent=strContent.substr(intLen,strContent.length);}strTemp+= strContent;obj.innerHTML=strTemp;}</script>注：以上脚本放在</head>前面.调用时如下写法：同个页面单处调用：<div id=‖content‖>这里是要应用换行的内容</div><scriptlanguage=‖javascript‖>toBreakWord(60, ―content‖);</script>同个页面多处调用：<div id=‖content‖>这里是要应用换行的内容</div><scriptlanguage=‖javascript‖>toBreakWord(60, ―content‖);</script><div id=‖content2″>这里是要应用换行的内容</div><scriptlanguage=‖javascript‖>toBreakWord(60, ―content2″);</script>注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的<script language=‖javascript‖>toBreakWord(60, ―content‖);</sc ript>这段JS，如果不是就要输出。

CSS Hack

1.区别IE和非IE浏览器#tip {background:blue;/*非IE 背景藍色*/background:red \9;/*IE6、IE7、IE8背景紅色*/}2.区别IE6,IE7,IE8,FF【区别符号】：「\9」、「*」、「_」【示例】：#tip {background:blue;/*Firefox 背景变蓝色*/background:red \9;/*IE8 背景变红色*/*background:black;/*IE7 背景变黑色*/_background:orange;/*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法1)【区别符号】：「*」、「_」【示例】：#tip {background:blue;/*Firefox背景变蓝色*/*background:black;/*IE7 背景变黑色*/_background:orange;/*IE6 背景变橘色*/}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (方法2)【区别符号】：「*」、「!important」【示例】：#tip {background:blue;/*Firefox 背景变蓝色*/*background:green !important;/*IE7 背景变绿色*/*background:orange;/*IE6 背景变橘色*/}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。