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, 解决的方法是针对于IE6,在css里写一个css hack, 如在左边的div上加:margin-right:0px!important;margin-right:-3px;!important这个标记IE7和firefox是支持的,而我们伟大的IE6却视而不见,我们就可以根据这个特点,让左div针对IE6有一个-3px的右margin,而IE7和firefox为0。

有兴趣的可以拷贝下面代码自己请手去试一下:(考虑在blog里显示的问题,下面代码人为增加了一些空格,请copy的时候自行删去)
< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >

C: 图层float实现页面布局,遇到的浏览器问题
这是我在具体做项目时实际遇到的问题,解决这个问题的思路和方法来自GL的支持,我把它整理出来分享,希望能给你有所帮助。

看下面图1,现在一共有divA, divB, divC, divD, divE这么5个div, 目标是让divD和divE移上去,跟divA其行显示,达到图2的效果。我在当时实现的时候,在divA,divB,divC里分别加上style=”float:left;clear:both”,这样在IE6和IE7里实现了图2的效果,但在firefox里就出现了图3的显示,我在当时试过很多方法, 如在div4里写float:right;让div4有悬浮,想让它上去,这样只能跟divC并列显示。对css感兴趣的人可以先自己试试,其实方法很是简单,给div4和div5分别设置个左边距如margin-left:380px;就解决了。这个例子解决起来其实很简单,这里是提供一种解决css兼容问题上的一种思路。


图1


图2


图3

D: 如何让图片在div里左右居中,上下居中
如下图1, 我们要让图片在IE6,IE7和firefox下图片相对div左右居中,上下居中来显示如图2,这是众多设计师可能都要面对要解决的问题,因为这种方式我们经常要用到。这里把解决的方法分享给大家,要想让图片左右对齐,我们可以在div里写入”style:text-align:center;”,左右居中问题好解决,现在看一下,IE6,IE7和firefox里,图片都已经是左右居中了,技术的难点是如何让图片在三个浏览器垂直居中。大部分人可能会考虑使用vertical-align:middle来使图片居中,加上去看看没有出现效果,这里我们针对图片设置如下代码:style=”_margin-top: expression(( 300 – this.height ) / 2);发现在IE6下效果实现了,再看看IE7和firefox, 没有变化,这里我们针对IE7和firefox来设置,在div里写入line-height:300px;vertical-align:middle,发现IE7这时候也有效果了,这里的line-height:300px;是根据div的高度定的,如果div的高度为100px,则这里设置line-height:100px,这里我们设置为300px。那么,这时候IE解决了,看一下firefox图片还没垂直居中,再对div增加样式:display:table-cell,现在再看看firefox也好了。


图1


图2

参考代码:
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />
< /div >

E: IE捉迷藏现象
捉迷藏问题是IE非常典型的对css支持上的bug, 问题主要出现在IE6浏览器。当div嵌套结构稍微复杂时,就会出现捉迷藏情况。如下面例子:

起初我们写上比较简单的结构代码,如下:

上面代码非常简单,现在我们在里面尝试增加一些内容:

为了让bug显示,我们给上面的xhtml写上css样式,如下:

然后我们到IE7.0 firefox里先后去预览一下,显示一切正常,如下图1。

图1

我们再到IE6去打开它,发现在刚刚打开的时候,看到如下图2的情况,右侧的内容奇怪的消失了。全选页面内容,发现右侧内容是存在的,如果用鼠标移到链接上面,右侧的内容又跑了出来,这就是IE6著名的捉迷藏现象。不仅在目前事例中,在其他情况下也可能出现。造成这种现象的具体触发机制目前还不能合理的归类,至今为止,这种情况只在IE6下出现。

图2

解决这个问题的方法,可以参考positioniseverything.net的网站专家给出的一些建议:
a: 在代码的下面使用一个带有< div style=”clear:both;”>< /div >这样的div来清除悬浮
b: 如果有可能,给layout对象设定width和height
c: 可以尝试给layout和left对象使用position:relative
d: 对layout使用line-height属性,强制浏览器对内容文字进行行距调整。

以上是提供解决浏览器问题的一些技巧,positioniseverything.net网站专家的建议,更重要的是要养成良好的编码习惯来预防捉迷藏情况的发生。

一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:
a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important
b:针对IE7/firefox 在css的前面加 [xmlns], 如下面的left属性,如果我想要只针对IE7/firefox起作用,写法如下:
[xmlns] #left {
?float:left;
?border:4px solid #999;
?padding:5px;
?width:200px;
?height:200px;
}
c: 只针对IE6起作用,可以在css前面加* html,如:
* html #left {
?clear:both;
}

d: 只针对IE7起作用,在css里前面加*+html,如:
*+html #left {
?clear:both;
}

赞(0) 打赏
未经允许不得转载:WEB前端开发 » css处理浏览器兼容技巧总汇

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏