IE6 CSS :hover小tip

作者：kun10 发布时间：April 17, 2011 分类：CSS

好久不写css真的感觉手生了，这两天做项目真是发觉自己又遇到了好多的问题。
比如首次遇到了猪头bug：）

这里我主要还是想说一下用css来实现鼠标移上元素显示浮层的效果的注意点
为了要兼容ie6并尽量的使用纯css来制作。

说几点tip（话说今天调试ie6很费劲）
1、a标签要使用hover伪类就要加上href属性
2、hover伪类要在ie6下面生效，就要注意a:hover的样式和a的样式要有差异性（小马其实早有总结过）
3、a里面不能够再嵌套a标签（算是常识吧，所以在ie6下面要实现hover显示的元素上面再使用hover效果，估计没戏）

还有一些问题和具体的场景有关，由于项目还在demo阶段，设计稿就先不透露了，估计过段时间可以放个图出来解释一下。

IE6、7下position和zindex的一个bug

作者：kun10 发布时间：December 27, 2010 分类：CSS

今天做demo遇到了一个很让人困扰的问题。
页面的头部有一个搜索框，里面有一个表示浮出层的div。

<div class="grandfather">
    <div class="father">
        <div class="popup">
        </div>
    </div>
    <div class="uncle">
         <div class="uncle-popup">
         </div>
    </div>
</div>

基本就是上面的类似的html结构，为了达到浮层不被别的层遮盖的目的
我设定了一下css

    .father {
                position:relative;
                z-index:4;
                width:400px;
                height:400px;
                background:#CCC;
                margin-bottom:-300px;
            }
    .popup {
                position:absolute;
                z-index:100;
                width:100px;
                height:200px;
                background:#999;
    }

可是没想到这样的样式在IE6下面居然被下面的元素给挡住了。
demo如下：地址http://lab.zipeng.info/ie6-position-zindex.html
查其原因，原来是uncle的div里面的元素也有z-index属性，虽然z-index的值比popup的值要小。但还是挡住了father里面的popup(这是关键)。

最后查阅了资料，发现ie67下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。
解决方式也很简单，给父元素加上z-index使他们具有可比性。
哎，在这个IE6走向灭亡的年代才发现这样的问题真是不应该啊~~~

  1. 1