《CSS Hack汇总》由会员分享，可在线阅读，更多相关《CSS Hack汇总（6页珍藏版）》请在金锄头文库上搜索。
1、CSS Hack 汇总编写人：郭福恩 MSN： 附件：附件：CSSCSS HackHack 汇总汇总 1.1.什么是什么是 CSSCSS hackhack 由于不同的浏览器，比如 IE 6,IE7, Firefox 等，对 CSS 的解析认识不一样，因此会导致 生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器， 能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的 CSS code 的过程，就叫 CSS hack,也叫写 CSS hack。2.2.CSSCSS HackHack 的原理
2、是什么的原理是什么 由于不同的浏览器对 CSS 的支持及解析结果不一样，还由于 CSS 中的优先级的关系。我们 就可以根据这个来针对不同的浏览器来写不同的 CSS。 比如 IE6 能识别下划线“_”和星号“*” ，IE7 能识别星号*，当不能识别下划线_，而 firefox 两个都不能认识。等等书写顺序，一般是将识别能力强的浏览器的 CSS 写在后面。下 面如何写里面说得更详细些。3.3.如何写如何写 CSSCSS HackHack 比如要分辨 IE6 和 firefox 两种浏览器，可以这样写： div background:green; /* for firefox */ *backgro
3、und:red; /* for IE6 */ 我在 IE6 中看到是红色的，在 firefox 中看到是绿色的。 div background:green; /* for firefox */ *background:red; /* for IE6 */ 我在 IE6 中看到是红色的，在 firefox 中看到是绿色的。 解释说明： 上面的 css 在 firefox 中，它是认识不了后面的那个带星号*的东东是什么的，于是将它 过滤掉，不予理睬，解析得到的结果是:divbackground:green,于是理所当然这个 div 的背 景是绿色的。 在 IE6 中呢，它两个 background
4、 都能识别出来，它解析得到的结果是: divbackground:green;background:red;,于是根据优先级别，处在后面的 red 的优先级高， 于是当然这个 div 的背景颜色就是红色的了。4.4.区别不同浏览器，区别不同浏览器，CSSCSS hackhack 写法：写法： 区别 IE6 与 FF： background:orange;*background:blue; 区别 IE6 与 IE7：background:green !important;background:blue; 区别 IE7 与 FF： background:orange; *background:gr
5、een; 区别 FF，IE7，IE6：background:orange;*background:green !important;*background:blue; 区别 IE6，IE7，firefox: background:orange;*background:green;_background:blue; 注：IE 都能识别*;标准浏览器(如 FF)不能识别*； IE6 能识别*，但不能识别 !important, IE7 能识别*，也能识别!important; FF 不能识别*，但能识别!important; IE6 支持下划线，IE7 和 firefox 均不支持下划线5.5.书
6、写的顺序书写的顺序 firefox 的写在前面，IE7 的写在中间，IE6 的写在最后面。6.6.屏蔽屏蔽 IEIE 浏览器（也就是浏览器（也就是 IEIE 下不显示）下不显示） *:lang(zh) select font:12px !important; /*FF,OP 可见，特别提醒：由于 Opera 最近 的升级，目前此句只为 FF 所识别*/ select:empty font:12px !important; /*safari 可见*/ 这里 select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。 7.7.仅仅 IE7IE7 与与 IE5.0IE5
7、.0 可以识别可以识别 *+html select 当面临需要只针对 IE7 与 IE5.0 做样式的时候就可以采用这个 HACK。 8.8.仅仅 IE7IE7 可以识别可以识别 *+html select !important; 当面临需要只针对 IE7 做样式的时候就可以采用这个 HACK。 9.9.IE6IE6 及及 IE6IE6 以下识别以下识别 * html select 这个地方要特别注意很多博客都写成了是 IE6 的 HACK 其实 IE5.x 同样可以识别这个 HACK。其 它浏览器不识别。html/*/ body select 这句与上一句的作用相同。 10.10. 仅仅 I
8、E6IE6 不识别，屏蔽不识别，屏蔽 IE6IE6 select display /*屏蔽 IE6*/:none; 这里主要是通过 CSS 注释分开一个属性与值，注释在冒号前。仅仅 IE6IE6 与与 IE5IE5 不识别，屏蔽不识别，屏蔽 IE6IE6 与与 IE5IE5 select/*/ display /*IE6,IE5 不识别*/:none; 这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。不屏蔽 IE5.5 11.11. 仅仅 IE5IE5 不识别，屏蔽不识别，屏蔽 IE5IE5 select/*IE5 不识别*/ 这一句是在上一句中去掉了属性区的注释。只有 IE
9、5 不识别，IE5.5 可以识别。 12.12. 盒模型解决方法盒模型解决方法 selct width:IE5.x 宽度; voice-family :“; voice-family:inherit; width:正确宽 度;盒模型的清除方法不是通过!important 来处理的。这点要明确。 13.13. 清除浮动清除浮动 select:after content:“.“; display:block; height:0; clear:both; visibility:hidden; 在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用 这个清除浮动的
10、 HACK 来对父级做一次定义，那么就可以解决这个问题。 14.14. 截字省略号截字省略号 select -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是 目前 Firefox 并不支持。15.15. 只有只有 OperaOpera 识别识别 media all and (min-width: 0px) select 针对 Opera 浏览器做单独的设定。16.16. IE5.xIE5
11、.x 的过滤器，只有的过滤器，只有 IE5.xIE5.x 可见可见media tty icontent:“;/*“ “*/ import ie5win.css; /*“; /* */ IE5/MAC 的过滤器，一般用不着 /*/*/import “ie5mac.css“; /*/ 17.17. IEIE 的的 ifif 条件条件 HackHack Only IE 所有的 IE 可识别Only IE 5.0 只有 IE5.0 可以识别Only IE 5.0+ IE5.0 包换 IE5.5 都可以识别Only IE 6- 仅 IE6 可识别Only IE 6/+ IE6 以及 IE6 以下的 IE5.x 都可识别Only IE 7/- 仅 IE7 可识别以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供 一个方便。以下图表为各种属性在不同浏览器中的支持一览：以下图表为各种属性在不同浏览器中的支持一览：意见反馈意见反馈在使用过程中，如果遇到问题或有任何的意见、建议可按以下方式联系规范编写人员，我会对您的问题以及意见、建议做出及时的反馈。联系人：郭福恩QQ：39426338MSN：邮箱：
