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

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/12/12

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

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

css效果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效果图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效果图chrome效果图

效果还不错,然后看看IE

IE7效果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效果IE6,7效果

猛击这里查看demo

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

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

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/html-css/css-squared-compatible-with-ie6.html