探讨css兼容性问题
网页结构的根本就是要做好DIV+CSS排版，合理的布局DIV CSS可以有利于搜索引擎的抓取；而且DIV+CSS建造的网页 ，不但美观，而且对于我们程序员来说，提高了开发效率和对代码的管理， 所以 DIV+CSS排版 也逐渐取代了繁琐的表格排版；但是又出来一个新的问题：CSS对浏览器的兼容性，有是让人很头疼，当然，这个问题并非不能解决，当你了解当中的技巧跟原理之后，它也就不再那么麻烦了；最近，我也是因为这个问题，相当头疼，于是从各个地方收集一些关于IE6、7、8与Fireofx的兼容性处理方法，并整理了一下
一 DIV居中问题 一般来说，我们都是在body标记中加上CSS语法：body{margin:0 auto; }。这个语法的意思是，让body 内容的DIV标记 距上下为0px,左右自动。不过，不要忘记最重要的一点就是，body 的DIV一定要设定初始宽度； 再来说，DIV里面内容垂直居中;之前table排版时，都是用vertical-align:middle;可是这个在DIV排版中就不起作用了；这里教你一个有效的方法：设DIV的CSS属性{height:20px; line-height:20px;}。
二 DIV 的自适应高度 1.<div id="a" > <div id="b" style="height:100px;float:left;"> </div> <div id="c" style="height:100px;float:left;"> </div> </div> 这样的排版，相信你会很熟悉。这样有个问题，在IE8和 Fireofx 中看不出来，但是IE6下，就看的出来了；DIV a 她的高度为零，它没有随着子DIV高度增加而增加；而罪魁祸首就是Float属性。这个这个问题就是，DIV a中再加一个子DIV 设置Css属性为<div style="clear:both; "></div>
2.作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
三 margin加倍的问题
设置了float浮动属性的div,在设置margin属性，这个在IE6下，就会出现Margin加倍的现象；这个是IE6的一个著名的BUG。解决办法就是给DIV设置属性display:inline; 例如：
<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:10px;/*IE8 FF下理解为10px*/ display:inline;/*IE6下理解为20px*/}
四 页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
五 IE6的3像素Bug DIV 设置Float浮动后， IE6下就是产生3象素的bug； 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div> 六 IE6下图片下有空隙产生 IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
七 伪类的使用 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决
