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

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

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

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

css效果

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

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

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

html:

01<div id="main">
02    <a href="#">
03 <span class="bgcolor">1</span>
04 </a>
05 <a href="#">
06 <span class="bgcolor">2</span>
07 </a>
08 <a href="#">
09 <span class="bgcolor">3</span>
10 </a>
11 <a href="#">
12 <span class="bgcolor">4</span>
13 </a>
14 <a href="#">
15 <span class="bgcolor">5</span>
16 </a>
17 <a href="#">
18 <span class="bgcolor">6</span>
19 </a>
20 <a href="#">
21 <span class="bgcolor">7</span>
22 </a>
23 <a href="#">
24 <span class="bgcolor">8</span>
25 </a>
26 <a href="#">
27 <span class="bgcolor">9</span>
28 </a>
29</div>

css:

01#main{
02 width: 200px;
03 height: 200px;
04 margin: 0 auto;
05}
06#main a,#main span{
07 display: block;
08}
09#main a{
10 width: 50px;
11 height: 50px;
12 border: 0;
13 margin: 5px 0 0 5px;
14 position: relative;
15 float: left;
16 text-decoration: none;
17 z-index: 9;
18}
19.bgcolor{
20 background-color: #eee;
21 position: absolute;
22 width: 50px;
23 height: 50px;
24 border: 5px solid blue;
25 left: -5px;
26 top: -5px;
27 z-index: 99;
28 text-align: center;
29 line-height: 50px;
30 color: #333;
31}
32#main a:hover .bgcolor{
33 border: 5px solid red;
34 z-index: 999;
35}

其中关键的一步是：

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

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

chrome效果图

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

修改后：

1#main a:hover{
2    z-index: 999;
3}
4#main a:hover .bgcolor{
5    border: 5px solid red;  
6}

chrome效果图

效果还不错，然后看看IE

IE7效果

无语了

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

最终求助于Litten

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

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

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

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

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

最终效果：

IE6，7效果

猛击这里查看demo

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

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

365据说看到好文章不转的人，服务器容易宕机！

标签：CSS 面试 Html IE6

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/html-css/css-squared-compatible-with-ie6.html

IE6,IE7全局变量的DID(Dissociative Identity Disorder译为:人格分裂症) 变量怪异的操作模式和存储(2013-12-9 15:44:43)
JS通过奇数项和偶数项实现两种背景颜色的表格实现代码(2013-12-4 11:32:19)
前端开发面试题及答案(2013-12-2 16:1:8)
前端开发面试题（很有料）(2013-12-2 12:1:37)
清空Chrome/IE/FF浏览器dns缓存(2013-11-27 11:39:43)
浏览器DNS缓存机制分析-为什么修改hosts不立即生效(2013-11-27 11:29:33)
详解标准W3C盒子模型和IE的css盒子模型(2013-11-26 17:40:9)
css实现背景透明文字不透明 opacity 通过rgba颜色解决(2013-11-22 15:9:14)
常用区分IE6/IE7/IE8/Firefox/Opera的标识-CSS hack总结(2013-11-22 14:46:5)
CSS强制英文/中文换行与不换行 white-space word-break(2013-11-22 13:46:40)

关于我们 - 广告合作 - 免责声明 - 投诉建议

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

其中关键的一步是：

无语了

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

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

其中关键的一步是：

无语了

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

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

想你所想爱你所爱