论文部分内容阅读
摘要：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：40px!important；
margin-left：20px；
}
由于IE6不能识别!important，所以其左边距设置为20px，但由于其具备双边距的问题，实际上的左边距被设置为40px；而IE7或其他标准浏览器能够识别!important，并且!important拥有较高的优先级，不会对下一条语句进行解释，从而把左边距设置为40px。
（三）*+html。
例：在IE6与IE7中显示不同的文字颜色：
#box1{color：red；}
*+html#box1{color：green；}
第一句代码IE6或Firefox等标准浏览器能够正常识别，文字显示为红色，第二句只有IE7能够识别，文字显示为绿色。
三、总结
以上简单介绍了CSS HACK的基本概念和几个常用的CSS HACK规则。应用好这几个规则，基本可以解决当前几大主流浏览器对CSS的兼容问题，保证了网页在不同浏览器中的显示达到预想的效果。
参考文献：
[1](美)Michael Bowers著,刘申等译.精通CSS与HTML设计模式[M].人民邮电出版社,2008,9
[2]温谦.CSS彻底设计研究[M].人民邮电出版社,2006,11
[3](美)莫里著,陈黎夫等译.CSS禅意花园[M].人民邮电出版社,2007,6
[作者简介]谢晓丹（1983-），男，广东揭阳人，揭阳职业技术学院教师，系统分析师，主要从事web设计、数据库设计研究工作。
关键词：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：40px!important；
margin-left：20px；
}
由于IE6不能识别!important，所以其左边距设置为20px，但由于其具备双边距的问题，实际上的左边距被设置为40px；而IE7或其他标准浏览器能够识别!important，并且!important拥有较高的优先级，不会对下一条语句进行解释，从而把左边距设置为40px。
（三）*+html。
例：在IE6与IE7中显示不同的文字颜色：
#box1{color：red；}
*+html#box1{color：green；}
第一句代码IE6或Firefox等标准浏览器能够正常识别，文字显示为红色，第二句只有IE7能够识别，文字显示为绿色。
三、总结
以上简单介绍了CSS HACK的基本概念和几个常用的CSS HACK规则。应用好这几个规则，基本可以解决当前几大主流浏览器对CSS的兼容问题，保证了网页在不同浏览器中的显示达到预想的效果。
参考文献：
[1](美)Michael Bowers著,刘申等译.精通CSS与HTML设计模式[M].人民邮电出版社,2008,9
[2]温谦.CSS彻底设计研究[M].人民邮电出版社,2006,11
[3](美)莫里著,陈黎夫等译.CSS禅意花园[M].人民邮电出版社,2007,6
[作者简介]谢晓丹（1983-），男，广东揭阳人，揭阳职业技术学院教师，系统分析师，主要从事web设计、数据库设计研究工作。