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

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;
}