Alibaba.com UED

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

justin Posted in Web Developer at 12月 10, 2007 |

 作者: jacky

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这么５个div,　目标是让divD和divE移上去，跟divA其行显示，达到图２的效果。我在当时实现的时候，在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;
}