Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表1. 此汇总表中测试浏览器的版本为：微软系统自带：IE6、 IE7、IE8火狐：Firefox 3.6.6Safari：Safari 5.0谷歌浏览器：Chrome 6.0.458.1 devOpera浏览器：Opera 10.602. 其中，多数CSS hack是在selector{property:value;}基础上更改的。

selector代表CSS选择器，property代表CSS特性，value代表特性的值。

3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4. Q代表Quirks Mode，S代表Standards Mode。

5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。

1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。

CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。

切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。

IE6、IE7、IE8、Firefox兼容性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可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (EXP 1)【区别符号】：「*」、「_」【示例】：#divcss5{background:blue; /*Firefox背景变蓝色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4.区别IE6、IE7、Firefox (EXP 2)【区别符号】：「*」、「!important」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/*background:orange; /*IE6 背景变橘色*/}【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox【区别符号】：「*」、「!important」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/}【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (EXP 1)【区别符号】：「*」、「_」【示例】：#tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (EXP 2)【区别符号】：「!important」【示例】：#divcss5{background:black !important; /*IE7 背景变黑色*/background:orange; /*IE6 背景变橘色*/}【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox【区别符号】：「_」【示例】：#divcss5{background:black; /*Firefox 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。

CSS Hack汇总快查(CSS兼容代码演示)以下是常用CSS HACK问题及解决代码-DIV+CSS网支持1、屏蔽IE浏览器（也就是IE下不显示）*:lang(zh) select {font:12px !important;} /*FF的专用*/select:empty {font:12px !important;} /*safari可见*/这里select是选择符，根据情况更换。

第二句是MAC上safari浏览器独有的。

2、仅IE7识别hack*+html {…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

3、IE6及IE6以下识别CSS HACK* html {…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。

其它浏览器不识别。

html/**/ >body select {……}这句与上一句的作用相同。

4、仅IE6不识别div hackselect { display /*IE6不识别*/:none;}这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

5、仅IE6识别支持.yangshi{_height:20px;}这里IE6支持识别CSS属性前“_”短下划线。

6、仅IE6与IE5不识别select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

7、仅IE5不识别select/*IE5不识别*/ { display:none;}这一句是在上一句中去掉了属性区的注释。

只有IE5不识别8、盒模型解决方法selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。

这点要明确。

9、清除浮动select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

10、截字省略号select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。

只是目前Firefox并不支持。

11、只有Opera识别@media all and (min-wi dth: 0px){ select {……} }针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。

这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

12、IE的if条件Hack<!--[if IE]> Only IE <![endif]-->所有的IE可识别<!--[if IE 5.0]> Only IE 5.0 <![endif]-->只有IE5.0可以识别<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->IE5.0包换IE5.5都可以识别<!--[if lt IE 6]> Only IE 6- <![endif]-->仅IE6可识别<!--[if gte IE 6]> Only IE 6/+ <![endif]-->IE6以及IE6以下的IE5.x都可识别<!--[if lte IE 7]> Only IE 7/- <![endif]-->仅IE7可识别13、仅IE8兼容识别div{height:20px\9;}这里的“\9”仅IE8支持识别解决PNG图片在IE6中背景不透明方1、解决PNG图片在IE6中背景不透明的CSS与JS代码 - TOPJS代码function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.{var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters)){for(var j=0; j<document.images.length; j++){var img = document.images[j]var imgName = img.src.toUpperCase()if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id) ? "id='" + img.id + "' " : ""var imgClass = (img.className) ? "class='" + img.className + "' " : ""var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "var imgStyle = "display:inline-block;" + img.style.cssTextif (img.align == "left") imgStyle = "float:left;" + imgStyleif (img.align == "right") imgStyle = "float:right;" + imgStyleif (img.parentElement.href) imgStyle = "cursor:hand;" + imgStylevar strNewHTML = "<span " + imgID + imgClass + imgTitle+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"img.outerHTML = strNewHTMLj = j-1}}}}window.attachEvent("onload", correctPNG);CSS代码：#id{background:url(图片路径) ;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="图片路径");_background:none;}2、解决png图片在html中IMG标签使用PNG图片IE6中背景不透明方法 - TOP1、新建一个JS文件为iepngfx.js,进以上JS代码拷贝到JS文件里2、在HTML中声明只有IE6读取此新建JS文件iepngfx.js中只允许IE6读取此JS文件方法：<!--[if IE 6]><script src="images/iepngfx.js" language="javascript"type="text/javascript"></script><![endif]-->3、在html中使用图片标签IMG运用PNG图片，在IE6试试看PNG图片背景是否透明了。