IE6/7下的几个BUG

这几天在折腾一个宣传网站的英文版,需要兼容到IE7,IE6已经被我们无视了,估计以后我们还可以无视IE9以下了呢,窃喜下,

好久不调IE,都差点忘记怎么调了,好在我们可以用IE9下的开发工具,还可以看下到底是哪里出了问题了。

1.IE6/IE7 position:relative/absolute z-index失效问题css bug

这个问题表现为,我们做下拉菜单的时候,被下面的焦点图给挡住了,有木有同感啊,无论我们怎么加大下拉列表的z-index,总是被焦点图给挡住,主要问题是IE6/7下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性,那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。

解决方式也很简单,给父元素加上z-index使他们具有可比性。

2.display:inline-block问题

有两种方法 :

1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):

div {display:inline-block;…}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div {display:inline; zoom:1;…}