我用空的 span 标签创建了表格,并用 padding 给了它们一个盒子阴影。其简单的html结构如下。
<table>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></td></span>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
</table>
css代码如下..
th {
font-size: 20px;
background-color: #cccccc;
padding: 5px 8px;
}
td {
padding: 5px 5px 10px 5px;
font-size: 18px;
background-color: #ececec;
}
th,td {
border-right: 2px solid #dedcdd;
}
table {
margin-top: 25px;
border: 2px solid #dedcdd;
position: relative;
border-collapse: collapse;
}
.tokenHolder {
background-color: white;
cursor: pointer;
position: relative;
color: transparent;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 2px 2px 2px gray;
border-radius: 2px;
}
相应的 js fiddle 位于 http://jsfiddle.net/Pank/4A9BM/
这里在使用 border-collapse:collapse 之后在表格中删除了其中 span 的框阴影..
否则漏洞代码在所有浏览器中都运行良好..
请帮助解决这个 ie 相关的怪癖..
我是一名优秀的程序员,十分优秀!