面试题：css九宫格 兼容IE6 考虑语义化的结构

网上疯传了一道css面试题，题目是这样的：

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时把span的z-index设置大一些，目的使其高于其他格子。

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

chrome效果图

分析得知，span其实是位于a里面，虽然span的z-index变大了，但本质上只是相对于外层的a来说的，因为要使得某一个格子位于其他的格子之上，需要提高a的z-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

你也可以尝试在线编辑九宫格jsfiddle

来源：http://xueran.github.io/blog/2012/12/17/csstest-jiugongge/