ie6 ie7 ie8 共存以及Firefox浏览器CSS兼容写法(3)

　　这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

　　属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

　　10 IE捉迷藏的问题

　　当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

　　有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

　　解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

　　11 高度不适应

　　高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

　　margin 或paddign 时。例：

　　

 

　　CSS：

　　#box {background-color:#eee; }

　　#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

　　解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

　　屏蔽IE浏览器(也就是IE下不显示)

　　*:lang(zh) select {font:12px !important;} /*FF,OP可见*/

　　select:empty {font:12px !important;} /*safari可见*/

　　这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

　　仅IE7识别

　　*+html {…}

　　当面临需要只针对IE7做样式的时候就可以采用这个兼容。

　　IE6及IE6以下识别

　　* html {…}

　　这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。

　　html/**/ >body select {……}

　　这句与上一句的作用相同。

　　仅IE6不识别

　　select { display /*IE6不识别*/:none;}

　　这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

　　仅IE6与IE5不识别

　　select/**/ { display /*IE6,IE5不识别*/:none;}

　　这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

　　仅IE5不识别

　　select/*IE5不识别*/ { display:none;}

　　这一句是在上一句中去掉了属性区的注释。只有IE5不识别

　　盒模型解决方法

　　selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}

　　盒模型的清除方法不是通过!important来处理的。这点要明确。

　　清除浮动

　　select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

　　在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。

　　截字省略号

　　select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }

　　这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

　　只有Opera识别

　　@media all and (min-width: 0px){ select {……} }

　　针对Opera浏览器做单独的设定。

　　以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

　　IE5.x的过滤器，只有IE5.x可见

　　@media tty {

　　i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}

　　}/* */

　　IE5/MAC的过滤器，一般用不着

　　/**//*/

　　@import "ie5mac.css";

　　/**/

　　下面是IE的条件注释，个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢?你知道怎么选择了吧～～呵呵

　　IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释

　　Only IE

　　所有的IE可识别

　　只有IE5.0可以识别

　　Only IE 5.0+

　　IE5.0包换IE5.5都可以识别

　　仅IE6可识别

　　Only IE 7/-

　　IE6以及IE6以下的IE5.x都可识别

　　Only IE 7/-

　　仅IE7可识别

　　Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。

原文转自：http://www.ltesting.net