有趣的css九宫格,变态的IE

Comments

前几天,Litten给我分享了一道ccss的面试题

题目是这样的:

9个元素,每个50*50px,排成九宫格
默认是border颜色为blue,hover到格子上变成red(兼容到IE6)

css效果

这道题目的重点和难点在于hover时候的效果,观察会发现相邻的两个格子需要共享同一条边。

* 拿到这道题目,首先想到的是用绝对定位来做   
* 显而易见,我们需要一个大的div来作为容器   
* 那么9个格子如果都相对于这个div定位的话,就太繁琐了   
* 观察这个九宫格,其实不难想到,对于每个格子,我们可以创建两个元素,a和span,用a来做span的容器,
  只需要span相对于a来定位就可以了,这样只需要设置一个统一的样式,而不必单独为 每一个格子设置样式。

思路有了,接下来就是代码的尝试了JiuGongGe.html

html:

<div id="main">
    <a href="#">
        <span class="bgcolor">1</span>
    </a>
    <a href="#">
        <span class="bgcolor">2</span>
    </a>
    <a href="#">
        <span class="bgcolor">3</span>
    </a>
    <a href="#">
        <span class="bgcolor">4</span>
    </a>
    <a href="#">
        <span class="bgcolor">5</span>
    </a>
    <a href="#">
        <span class="bgcolor">6</span>
    </a>
    <a href="#">
        <span class="bgcolor">7</span>
    </a>
    <a href="#">
        <span class="bgcolor">8</span>
    </a>
    <a href="#">
        <span class="bgcolor">9</span>
    </a>
</div>

css:

#main{
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
#main a,#main span{
    display: block;
}
#main a{
    width: 50px;
    height: 50px;
    border: 0;
    margin: 5px 0 0 5px;
    position: relative;
    float: left;
    text-decoration: none;
    z-index: 9;
}
.bgcolor{
    background-color: #eee;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid blue;
    left: -5px;
    top: -5px;
    z-index: 99;
    text-align: center;
    line-height: 50px;
    color: #333;
}
#main a:hover .bgcolor{
    border: 5px solid red;
    z-index: 999;
}

其中关键的一步是:

hover时把spanz-index设置大一些,目的使其高于其他格子。

但是最终效果却没有达到预期

chrome效果图

分析得知,span其实是位于a里面,虽然spanz-index变大了,但本质上只是相对于外层的a来说的,因为要使得某一个格子位于其他的格子之上,需要提高az-index

修改后:

#main a:hover{
    z-index: 999;
}
#main a:hover .bgcolor{
    border: 5px solid red;  
}

chrome效果图

效果还不错,然后看看IE

IE7效果

无语了

究其原因这里实在是想不通,试了各种方法也无法解决

最终求助于Litten

今天Litten告诉我说是因为IE6、7下面,hover时,设置了z-index后,margin就会失效,而我的代码里面a正好就有margin,所以才会出现格子向左移动了5px的情况

但是怎么解决,Liiten表示也没有办法。

戏剧性的是,在这之后的5分钟,Litten兴奋的说:解决了,然后把代码发给我,结果让我想不到的是,居然只是加了一行看起来无关紧要的代码

#main a:hover{
    z-index: 999;
    background-color: #eee;
}

就是这一句background-color: #eee;起了作用,汗…所以不得不感叹:IE真是一朵美丽的奇葩

最终效果:

IE6,7效果

猛击这里查看demo

对于这道题目,Litten则是用的其他方法,相关文章请看有趣的css面试小题目——九宫格(一)