firefox,ie7,ie6兼容性问题,和css解决方案

现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对! important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。

我真希望那个IE6快点退休……css Hacks，css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:，这个CSS补丁(hacks)很简单，在样式表中单独为ie7设置某个元素，id或者class前面这样写:*:first-child+html #ID{}或者*:first-child+html .class{}别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.IE7 修复了很多bug，也增加了对一些选择符的支持，所以现在诸如*html {} 和html>body {} 等针对IE 隐藏或显示的hack 都会在IE7 中失效。

虽然CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在HTML 中，CSS Hack 还是有用武之地的。

Nanobot 发现了一些针对IE7 的CSS Hack，具体就是：>bodyhtml**+html这三种写法，其中前两种都是不合法的CSS 写法，在标准兼容浏览器中被被忽略，但是IE7 却不这么认为。

对于>body ，它会将缺失的选择符用全局选择符* 代替，也就是将其处理成了*>body，而且不光对于> 选择符，+,~ 选择符中这个现象也存在。

对于html* ，由于html 和* 之间没有空格，所以也是一种CSS 语法错误，但IE7 不会忽略，而是错误地认为这里有一个空格。

对于第三种*+html，IE7 认为html 前面的DTD 声明也是一个元素，所以html 会被选中，这三种方法中只有这一种方法是合法的CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的hack 用法。

最后作者给出了最佳方式：IE 6 and belowUse * html {} to select the html element.IE 7 and belowUse *+html, * html {} to select the html element.IE 7 onlyUse *+html {} to select the html element.IE 7 and modern browsers onlyUse html>body {} to select the body element.Modern browsers only (not IE 7)Use html>/**/body {} to select the body element.The IE7 CSS Hack(!important在ie7.0的hack方法)由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie 和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓”上有政策,下有对策”,国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.新建一个css样式如下：插入代码：#item {width: 200px;height: 200px;background: red;}新建一个div,并使用前面定义的css的样式：插入代码：some text here在body表现这里加入lang属性,中文为zh：插入代码：现在对div元素再定义一个样式：插入代码：*:lang(en) #item{background:green !important;}这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：插入代码：#item:empty {background: green !important}:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试：ie7 beta 2 preview/winie5.01+/winfirefox 1.5/winopera 8.5/win & linuxnetscape 7.01, 8/winmozilla 1.7.12/win & linuxsafari 2/macfirefox 1.0.4/linuxepiphany 1.4.8/linuxgaleon 1.3.20/linuxScreenshot of the IE7 css hack in IE7Screenshot of the IE7 css hack in Firefox 1.5按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.firefox,ie7,ie6兼容性问题，和css解决方案注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别!important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;写两句代码来控制一个属性，区别Firefox与IE6：background:orange;*background:blue;//这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；写两句代码来控制一个属性，区别IE7与IE6：background:green !important;background:blue;//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别! important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。

写两句代码来控制一个属性，区别Firefox与IE：background:orange; *background:green;//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*写三句代码来控制一个属性，区别Firefox，IE7，IE6：background:orange;*background:green !important;*background:blue;//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7 是不能识别的。

IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

什么是浏览器兼容：当我们们使用不同(的)浏览器（Firefox IE7 IE6）访问同一个网站,,或者页面(的)时候,,会出现一些不兼容(的)问题,,在这种浏览器下显示正常,,在另一种下就乱了,,我们们在编写 CSS(的)时候会很恼火,,刚修复了这个浏览器(的)问题,,结果另外一个浏览器却出了新问题..好吧,,我们服了行吧,,那我们就利用你们们(的)不兼容各写一段css,让他们们各执行各(的),,这下总该你们没脾气了吧,,呵呵..好了,,言归正传一、!important (功能有限)随着IE7对!important(的)支持, !important 方法现在只针对IE6(的)兼容.(注意写法.记(得)该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 200px; /* IE6 */}二、CSS HACK(的)方法(新手可以看看,,高手就当路过吧)首先需要知道(的)是：所有浏览器通用 height: 100px;IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、IE7 共用 *height: 100px;IE7、FF 共用 height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下面(的)这种方法比较简单举几个例子：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个用上面说(的)第一种方法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意(的)是,,代码(的)顺序一定不能颠倒了,,要不又前功尽弃了..因为浏览器在解释程序(的)时候,,如果重名(的)话,,会用后面 (的)覆盖前面(的),,就象给变量赋值一个道理,,所以我们们把通用(的)放前面,,越专用(的)越放后面解释一下4(的)代码：读代码(的)时候,,第一行height:100px; 大家都通用,,IE6 IE7 FF 都显示100px到了第二行*height:300px; FF不认识这个属性,,IE6 IE7都认,,所以FF还显示100px,,而IE6 IE7把第一行(得)到(的)height属性给覆盖了,,都显示300px 到了第三行_height:200px;只有IE6认识,,所以 IE6就又覆盖了在第二行(得)到(的)height,最终显示200px这样,,三个浏览器都有自己(的)height属性了,,各玩各(的) 去吧这样说要是你们还不明白,,要么你们去撞墙,,要么我们去!不过还是你们去比较好..哦,,差点忘了说了：*+html 对IE7(的)兼容必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">三、使用IE专用(的)条件注释<!--其他们浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及以下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->貌似要编三套css,,我们还没用过,,先粘过来再说IE(的)if条件Hack1. <!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->2. <!-[if IE]> 所有的IE可识别 <![endif]-->3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then 大于&gt; = > 大于号lt = Less Then 小于&lt; = < 小于号gte = Great Then or Equal 大于或等于lte = Less Then or Equal 小于或等于四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)新建一个css样式如下：#item {width: 200px;height: 200px;background: red;}新建一个div,并使用前面定义的css的样式：<div >some text here</div>在body表现这里加入lang属性,中文为zh：<body lang="en">现在对div元素再定义一个样式：*:lang(en) #item{background:green !important;}这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：#item:empty {background: green !important}:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。