浅释CSS HACK的用法.docVIP

浅释CSS HACK的用法 　　摘要：CSS在当前的web设计中扮演了越来越重要的角色，已成为web标准中重要的组成部分。但由于各大主流浏览器对CSS支持程度各不相同，导致网页在各种浏览器中的显示效果不一致，给网页的浏览带来了不便。本文针对CSS对各大主流浏览器的兼容问题，浅释了CSS HACK的用法，解决了CSS在不同浏览器中的兼容问题。 　　关键词：HACK；CSS；浏览器兼容 　　中图分类号：TP393 文献标识码：A文章编号：1007-9599 (2011) 13-0000-01 　　Simple Explanation of the Usage of CSS HACK 　　Xie Xiaodan 　　(Jieyang College,Jieyang522000,China) 　　Abstract:CSS in the current web design plays an increasingly important role and has become an important part of the web standards.However,the mainstream browsers support for CSS varying degrees,resulting in a variety of Web browsers is inconsistent in the display,web browsing to the inconvenience.In this paper,the major mainstream of CSS browser compatibility issues,make the Simple Explanation to the use of CSS HACK,and solve the CSS in different browsers compatibility issues. 　　Keywords:HACK;CSS;Browser compatibility 　　CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制Web页面的外观。采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：（1）表现和内容相分离；（2）提高页面浏览速度；（3）易于维护和改版。 　　只要简单的修改几个CSS文件就可以重新设计整个网站的页面。 　　正因为CSS具备以上优势，使得其使用者越来越多，涌现出大量优秀网站。但由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS解析的标准不同，因此对于相同的CSS代码，可能会生成不同的页面效果，从而无法在所有浏览器中得到我们想要的效果。这时，我们就需要针对不同的浏览器去写不同的CSS代码，让它能够在所有浏览器中获得相同的效果。这个过程，就是CSS hack。也就是写出只有个别浏览器或某些浏览器识别的CSS代码。下面笔者根据多年的教学经验，简单总结了CSS HACK的用法，希望对读者有一定的帮助。 　　一、CSS HACK规则 　　CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。我们可以在CSS代码中加入某些字符或关键字，由于各浏览器对这些字符或关键字的解释不一样，我们可以让不同的浏览器选择相应的CSS代码进行解释，从而达到显示出设想中的效果的目的。 　　常用的CSS HACK规则有： 　　IE都能识别*；标准浏览器（如Firefox）不能识别*；IE6能识别*，但不能识别!important；IE7能识别*+html，其它浏览器不能识别；IE7能识别*，也能识别!important；FF不能识别*，但能识别!important； 　　如下表所示： 　　 IE6 IE7 Firefox 　　* √ √ × 　　!important × √ √ 　　*+html × √ × 　　二、实例演示 　　（一）*符号 　　例：在Firefox和IE中呈现不同的文字颜色： 　　#box1{ 　　color：red； 　　*color：blue； 　　} 　　由于Firefox浏览器不能识别*符号，所以文字呈现红色，而IE浏览器能识别*符号，所以文字呈现蓝色。 　　（二）!important 　　例：解决IE6中浮动元素水平方向双边距问题： 　　#box1{ 　　width：200px； 　　height：120px； 　　background：#99CC66； 　　float：left； 　　margin-left：40p