ie浏览器兼容问题小结

.e {/*FF OP*/
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
} 
* html .e{/*IE6*/
background-color:#00FFFF
} 

　　需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

五，必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧

FF浏览器

.test{
    height:20px; 
    background-color:orange; 
} 
IE7浏览器

*+html .test{/*IE7*/ 
    height:20px; 
    background-color:blue; 
} 
IE6浏览器

*html .test{/*IE6*/ 
    height:20px; 
    background-color:black; 
} 
　　通过上面的CSS代码可以看出FF还是最听话的浏览器。
　　在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html。
　　这里就很好记忆了，IE6加*html，而IE7加*+html，暗示加了一个版本。
　　通过对class、id所做的CSS HACK好处在于不用顾及前后顺序，而且便于管理和其他人员接受，
　　还可以通过这种HACK实现类似JS浏览器版本的控制。
                    
　　上面内容看完可以点击下面的效果在不同浏览器来看看效果，
　　其中橙色代表FF，蓝色代表IE7，黑色代表IE6。

六，CSS hacks：浏览器特定选择器介绍

IE6以下

*html{}
IE 7 以下

*:first-child+html {} * html {}
只对IE 7

*:first-child+html {}
只对IE 7 和现代浏览器

html>body {}
只对现代浏览器(非IE 7)

html>/**/body {}
最新的Opera 9以下版本

html:first-child {}
Safari

html[xmlns*=”"] body:last-child {}
要使用这些选择器，请在样式前写下这些代码。例如：

#content-box { 
width: 300px; 
height: 150px; 
} 
* html #content-box { 
width: 250px; 
} 
/* 重写上面的代码并且把宽度改为250PX 
在IE6以下版本中适用。 */

七，CSS Hack技术速查对照

*:lang(zh) select {font:12px  !important;} /*FF,OP可见*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别
 
*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
 
* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。
仅IE6不识别，屏蔽IE6
 
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
仅IE6与IE5不识别，屏蔽IE6与IE5
 
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
仅IE5不识别，屏蔽IE5
 
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
盒模型解决方法
 
selct {width:IE5.x宽度; voice-family :"/"}/""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
 
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
截字省略号
 
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
 
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
　　以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
 
@media tty {
i{content:"/";/*" "*/}} @import ‘ie5win.css‘; /*";}
}/* */
IE5/MAC的过滤器，一般用不着
 
/*/*//*/
    @import "ie5mac.css";
/**/
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可识别
　　以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

八，解决XHTML+CSS兼容性的五个方案!

　使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰 

　　1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

　　div{margin:30px!important;margin:28px;}

　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

　　div{maring:30px;margin:28px}

　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

　　2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改：

　　div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

　　3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义：

　　ul{margin:0;padding:0;}

　　就能解决大部分问题。

　　4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为：

　　就可以了。

　　5.如果你在BOX容器里使float和text-align的方向设为一致：

　　{float:left;text-align:left;margin:0 0 0 200px;}