hack

由于各大浏览器尤其IE浏览器对web标准支持情况不一，导致标准的网页在各个浏览器中的表现不一，因此，解决各浏览器兼容性问题成为了前端工程师最重要的工作之一，而所谓的hack技术则是前端开发中必用的。 CSS hack的写法有很多种，其中，特殊符号的应用最为普遍，也最为简洁，下面一一介绍了特殊符号类型的CSS hack技术： 1、反斜线（\） 适用浏览器：IE/Mac 反斜线（\）hack利用了IE/Mac的一个bug。以\*/结束的注释在IE/Mac上是不正确关闭的，所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。 /* 在IE Mac上忽略下面的语句 \*/ selector { ...styles... } /* 忽略结束 */ 2、下划线（_） 适用浏览器：IE6及其以下版本 IE 6 及以下的版本可以识别带有下划线前缀的属性，而其它浏览器会忽略它。因此，一个属性前面加上下划线或者连字符，就成为了IE6及以下版本浏览器的专有属性。 #elem { width: [W3C Model Width]; _width: [BorderBox Model]; } PS:这个hack利用浏览器的bug使用了无效的CSS，因而不推荐使用。 3、星号（*） 适用浏览器：IE7以下版本 除了下划线和连字符，版本7及以下的IE可以识别以非字母字符为前缀的属性，而其它浏览器会忽略。

通俗地讲：CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。 由于各浏览器的内核不同，所以会造成一些误差就像JS一样，一个JS网页特效，在微软IE6、IE7、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫做JS Hack ，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。 1.区别IE和非IE浏览器 CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } 【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)

首先，仅仅IE支持的条件注释语句 <!--[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]--> 例子 <!--[if lt IE 9]> 加载CSS1 <!--[else]> 加载CSS2 <![endif]--> 这样有效是有效,但是用HTML VALIDATOR里,报错, 因为这个不符合XHTML 1.1的规范, 如果把ELSE语句去掉,则正确. 方法： 加载CSS2 <!--[if lt IE 9]> 加载CSS1

目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容： 1、常见的特殊符号的应用： IE6： _selector{property:value;} selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important IE7： +selector{property:value;} IE8： selector{property:value\0;} IE6 & IE7： *selector{property:value;} IE6 & IE7 & IE8： selector{property:value\9;} 总结起来，如下： 其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。 （了解更多 Quirks模式 、 Strict(Standars)模式 ？） hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) * *color Yes Yes Yes Yes No Yes + +color Yes

上周给大家转载了 《Div+css浏览器兼容实例分析（一）》， 今天继续给大家转载 《div+css浏览器兼容实例二：css hack的理解》 。 先来说一下什么是css hack ，写了这么久的 div+css 代码，我还真不知道这个hack是什么？ 上网仔细查了一下。简单的说针对不同的浏览器写不同的 CSS code 的过程，就叫 CSS hack , 也叫写 CSS hack 。 Css hack 的原理： 由于不同的浏览器对 CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS 。 比如 IE6 能识别下划线 "_" 和星号 " * " ， IE7 能识别星号 " * " ，但不能识别下划线 "_" ，而 firefox 两个都不能认识。等等 书写顺序，一般是将识别能力强的浏览器的 CSS 写在后面 浏览器优先级别 :FF < IE7 < IE6 , CSS hack 书写顺序一般为 FF IE7 IE6 来看下面 div+css浏览器兼容 的例子： #demo {width:100px;} /* 被 FIREFOX,IE6,IE7 执行 .*/ * html #demo {width:120px;} /* 会被 IE6 执行 , 之前的定义会被后来的覆盖 , 所以 #demo 的宽度在 IE6 就为

CSS Hack 不得不在一些项目中运用到。jquery博客也遇上了，关于二次开发的一个3D地图，其实也想好好写代码兼容，苦于上头要东西，短期不可能实现，没法子，回归css hack 吧。 为了调试尼玛的3D地图，不得不安装了IE9，搭配着IEtest方便照顾IE全家。firefox chrome safari opera Hack 的顺序 一般使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下: Firefox -> IE6 -> IE7 -> 其他 Hack 的用法 说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已. 1. 同一文件中处理. 如: id=”bg” 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色. #bg { background:red !important; /* Firefox 等其他浏览器 */ background:blue; /* IE6 */ } *+html #bg { background:green !important; /* IE7 */ } IE6 不认 !important, 也不认 *+html. 所以 IE6

最近切的页面设计很精致，有那么些难以控制兼容性的问题，没办法，只有用hack解决了，，虽然不赞同hack，但是既然是页面布局，总觉得不要搭上javascript来解决，下面也总结下CSS hack浏览器兼容。 区别IE和非IE浏览器 background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ 区别IE6,IE7,IE8,FF background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ 浏览器都能识别「\9」，而IE6和IE7可识别「*」，另外IE6可认识「_」 区别IE6、IE7、Firefox 【区别符号】：「*」、「!important」 background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ *background:orange; /*IE6 背景变橘色*/ } IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」