网络编程
位置:首页>> 网络编程>> 网页设计>> 分享css处理浏览器兼容问题上的小技巧

分享css处理浏览器兼容问题上的小技巧

作者:jacky 来源:aliued.com 发布时间:2008-02-03 14:41:00 

标签:浏览器,兼容,标准,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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com