Css处理浏览器兼容上的小技巧

css里关于浏览器的兼容问题一直困惑着我们初级的css用户（高手可直接绕过），这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里 学到的有关处理浏览器兼容的问题，根据我前段时间在公司minisite项目里碰到的一些问题和解决方法分享给大家。浏览器兼容性的问题，我想一直是困绕 我们设计师的棘手问题，css的难点就在这里。解决好这个问题，我想你的css水平一定会得到大步的提升。

自从W3C标准推出以后，现在新的一些浏览器多多少少在使用这套web的新标准，但在各自对新标准的执行上并不统一，这就给我们设计师带来很多的问 题。目前世面上主流的浏览器还是IE和firefox,这两个浏览器几乎占领着整个浏览器的市场。而IE下面大部分人在用IE6和IE7两个版本的浏览 器，而这两个版本对css的支持有非常多的差异之处，这种差异是最需要我们设计师注意的，因为它跟我们的日常设计息息相关。我在实际的制作过程当中遇到的 问题有绝大部分是出现在IE6和IE7的css兼容性问题上。IE6，IE7在加上firefox2.0，如果能把这三个浏览器都搞定了，也就基本上满足 95%以上的用户了。在下面我列举了一些我在项目里碰到的实际的问题和解决的方法，其中有很多是css高手GL的处理思路和解决方法，非常值得吸取和借 鉴，因为这为我们解决今后遇到类似的问题提供解决问题的思路。建议先阅读《css网站布局实录》这本书，现在出了新版本《css网站布局实录2》，要仔细 阅读哦，相信我，的确能让你收益非浅。下面列举一些事例，希望能给大家提供一些借鉴：

A: IE6/IE7 div等块对象默认具有高度
下面图A是IE6里的一个div, 宽度是420px,没有设置高度, 其在IE6/IE7浏览器里,默认DIV具有了一个br的高度,图B是在firefox2.0下显示,div无高度。这样就给我们设计师在实际制作过程当 中带来问题，因为有的时候我们要设置一个div高度为5px，用于放置一张背景图片，在IE6里就会有问题。IE6的显示保持在了最低高度一个br，如图 c，在同样设置height:5px;情况下，上面是firefox显示下面是IE6。解决的方法是在div里设置一下line-height:0px;

图A

图B

图C

B: IE6下块对象默认的3PX现象
如图，上面是IE6.0里的显示，下面是IE7.0和firefox2.0,红色div设置为float:left;图片在宽度正好的情况下，在IE7和 firefox下可以上去，而在IE6里面就被显示在了第二行。这就是IE6的著名的3px现象，当一个对象设置为左悬浮，这个 块对像跟它右边浮上来的对象默认具有3px的margin, 解决的方法是针