上一篇
下一篇
Summary CSS Hack by jestin
作者:Jestin 日期:2008-01-17
最近一直打算总结目前为止用过的浏览器CSS Hack，常用的其实并不多，网上也可以查阅很多不同或者类似的方法。国内很多web的兼容真的很差，没有做好规范或者统筹规划，临时用这样那样的hack来解决手头的问题，但是一旦那些规模较大版本控制复杂的网站有设计变化或者浏览器版本更新，就会发生惨痛的维护和修正之类大量头疼的工作。因此采用越简单越“公共”越少的hack才是最科学的手段。
由于工作需求，对浏览器兼容主要以ie6、ie7、ff1.5、ff2.0为主要对象，做严格兼容测试。
我将hack手段分成2大类，一类是纯css hack，用于引用外部css中进行hack。另一类为页面中的hack。我会分别详细的将一些经验写在这里，供广大同行或爱好者一起探讨和补足。
＋纯css hack
我将写于可以外部引用css的css hack统定义为纯css hack。也就是说可以完全将hack写在.css文本中。这类hack建议用于公共的页面，尽量少用或者不用。（涉及页面设计这里暂不讨论）
最常用的：
－全面区分ie6,ie7,Firefox
程序代码
#jestinExample { color: #333; } /* Moz Firefox */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 + IE5.0 */
－区分ie6包含ie6以下版本 和 ie7/Firefox，请注意color的顺序。
程序代码
#jestinExample {
color: #333!important;/* Moz Firefox + IE7 */
color: #333; /* IE6 及以下版本 */
}
－仅ie6不能识别，通过CSS注释分开一个属性与值，注释在冒号前。
程序代码
#jestinExample { display /*屏蔽IE6*/:none;}
－另一种区分ie6包含ie6以下版本 和 ie7/Firefox
程序代码
html/**/ >#jestinExample { color: #333; }
－仅IE6与IE5不识别，屏蔽IE6与IE5，这个用处并不是太多，与上面屏蔽ie6不同的是在选择符与花括号之间多了一个注释。
程序代码
#jestinExample /**/ { color/*IE6,IE5不识别*/:#333;}
以上是最常用有效的几种hack，推荐程度由高至低，视情况选择。另外还有些特殊的hack，对于现在ff浏览器和ie浏览器来说还是挺实用的。
－常用的float属性在ff及ie7中和ie6的效果是有很大差别的，当子级都为float属性时，那么父级（height）就无法完全的包住整个子级，因此这个hack有效解决float浮动后造成的麻烦。
程序代码
#jestinExample:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
－屏蔽IE浏览器（IE下不起作用），也是很实用的，第二句是MAC上safari浏览器独有的。
程序代码
*:lang(zh) #jestinExample {color:#333 !important;} /* 目前此句只为FF所识别 */
#jestinExample:empty {color:#333 !important;} /* safari可见 */
@media all and (min-width: 0px){ #jestinExample {color:#333;} } /* Opera浏览器可见 */
要说的就是由于hack方法大部分为局部性的东西，所以还有另一种设计理念，就是先做浏览器过滤，这类方法用于对兼容要求绝对严格的web，但是要求严格，写代码麻烦，请在开始建设之初考虑清楚。
＋页面中的hack
我将只能用于页面中的hack统统归为此类。这些hack尽量用于web整站中很局部的页面，尽可能不要大量使用，否则维护修改要死人的也不易于其他开发人员阅读=_=。
－最常用过滤方法，是用css注释语句来过滤各类浏览器，非常实用有效。不得不提的一点就是：条件注释是在IE5.0/Win以后才被IE支持的，对于IE5以前的浏览器是无效的
程序代码
<!--[if IE]>...<![endif]--> / 如果浏览器是IE /
<!--[if IE 5]>...<![endif]--> / 如果浏览器是IE 5 的版本 /
<!--[if IE 6]>...<![endif]--> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]>...<![endif]--> / 如果浏览器是IE 7 的版本 /
<![if !IE]>...<![endif]--> / 如果浏览器不是IE /
几个参数：lte，lt，gte，gt及!
各自的详细解释如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同。
程序代码
<!--[if gt IE 5.5]>...<![endif]--> / 如果IE版本大于5.5 /
<!--[if lte IE 6]>...<![endif]--> / 如果IE版本小于等于6 /
<!--[if !IE]>...<![endif]--> / 如果浏览器不是IE /
基本差不多了，本篇CSS中所有#jestinExample均是选择符，可自己随意更换。另外还有些诸如ie5.5过滤等hack这里我就不详细说了，我很少用，对于苹果电脑的Opera浏览器也有些特殊的hack，由于我还是很少用所以也不加详叙了。=_=
由于工作需求，对浏览器兼容主要以ie6、ie7、ff1.5、ff2.0为主要对象，做严格兼容测试。
我将hack手段分成2大类，一类是纯css hack，用于引用外部css中进行hack。另一类为页面中的hack。我会分别详细的将一些经验写在这里，供广大同行或爱好者一起探讨和补足。
＋纯css hack
我将写于可以外部引用css的css hack统定义为纯css hack。也就是说可以完全将hack写在.css文本中。这类hack建议用于公共的页面，尽量少用或者不用。（涉及页面设计这里暂不讨论）
最常用的：
－全面区分ie6,ie7,Firefox
程序代码#jestinExample { color: #333; } /* Moz Firefox */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 + IE5.0 */
－区分ie6包含ie6以下版本 和 ie7/Firefox，请注意color的顺序。
程序代码#jestinExample {
color: #333!important;/* Moz Firefox + IE7 */
color: #333; /* IE6 及以下版本 */
}
－仅ie6不能识别，通过CSS注释分开一个属性与值，注释在冒号前。
程序代码#jestinExample { display /*屏蔽IE6*/:none;}
－另一种区分ie6包含ie6以下版本 和 ie7/Firefox
程序代码html/**/ >#jestinExample { color: #333; }
－仅IE6与IE5不识别，屏蔽IE6与IE5，这个用处并不是太多，与上面屏蔽ie6不同的是在选择符与花括号之间多了一个注释。
程序代码#jestinExample /**/ { color/*IE6,IE5不识别*/:#333;}
以上是最常用有效的几种hack，推荐程度由高至低，视情况选择。另外还有些特殊的hack，对于现在ff浏览器和ie浏览器来说还是挺实用的。
－常用的float属性在ff及ie7中和ie6的效果是有很大差别的，当子级都为float属性时，那么父级（height）就无法完全的包住整个子级，因此这个hack有效解决float浮动后造成的麻烦。
程序代码#jestinExample:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
－屏蔽IE浏览器（IE下不起作用），也是很实用的，第二句是MAC上safari浏览器独有的。
程序代码*:lang(zh) #jestinExample {color:#333 !important;} /* 目前此句只为FF所识别 */
#jestinExample:empty {color:#333 !important;} /* safari可见 */
@media all and (min-width: 0px){ #jestinExample {color:#333;} } /* Opera浏览器可见 */
要说的就是由于hack方法大部分为局部性的东西，所以还有另一种设计理念，就是先做浏览器过滤，这类方法用于对兼容要求绝对严格的web，但是要求严格，写代码麻烦，请在开始建设之初考虑清楚。
＋页面中的hack
我将只能用于页面中的hack统统归为此类。这些hack尽量用于web整站中很局部的页面，尽可能不要大量使用，否则维护修改要死人的也不易于其他开发人员阅读=_=。
－最常用过滤方法，是用css注释语句来过滤各类浏览器，非常实用有效。不得不提的一点就是：条件注释是在IE5.0/Win以后才被IE支持的，对于IE5以前的浏览器是无效的
程序代码<!--[if IE]>...<![endif]--> / 如果浏览器是IE /
<!--[if IE 5]>...<![endif]--> / 如果浏览器是IE 5 的版本 /
<!--[if IE 6]>...<![endif]--> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]>...<![endif]--> / 如果浏览器是IE 7 的版本 /
<![if !IE]>...<![endif]--> / 如果浏览器不是IE /
几个参数：lte，lt，gte，gt及!
各自的详细解释如下：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同。
程序代码<!--[if gt IE 5.5]>...<![endif]--> / 如果IE版本大于5.5 /
<!--[if lte IE 6]>...<![endif]--> / 如果IE版本小于等于6 /
<!--[if !IE]>...<![endif]--> / 如果浏览器不是IE /
基本差不多了，本篇CSS中所有#jestinExample均是选择符，可自己随意更换。另外还有些诸如ie5.5过滤等hack这里我就不详细说了，我很少用，对于苹果电脑的Opera浏览器也有些特殊的hack，由于我还是很少用所以也不加详叙了。=_=
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
回复
比较喜欢清除子容器的那段样式，哈爽[handclap]
引用内容
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
引用内容.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
发表评论
CopyRight 1998-2008, Jestin Box 2007
很有用~ 受益匪浅~