来自一淘的 WEB 前端的面试题，题目要求如下：
使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。
题目不难，主要还是考察面试者对 CSS 灵活运用程度。
以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。
如果你也有兴趣，不妨试试。
上一篇：等宽瀑布流布局的开发实践
-
ie8+ 可以用after伪元素了
-
feipigzi说道：
带刀的例子在IE6有问题，修改下样式就没问题了
.list a{ /*增加*/position:relative;}
.list a:hover{ /*增加*/z-index:5; } -
luoye说道：
我是用firefox看的，全部都有问题，估计没有考虑firefox,不过这个题目确实不难
-
huangzhiyang说道：
少了一层a标签嵌套
-
我写了个。https://gist.github.com/fiture/6227851
-
happyTIME_2说道：
我写了个，http://www.diandian.com/dianlog/happytime-2/new/text
-
发错地址了，抱歉，是这个http://happytime-2.diandian.com/post/2013-10-08/40052930909
-
也献丑了：https://gist.github.com/wangwen1220/8347489
“一淘九宫格的面试题”目前已有 9 条评论