Question

我创建了带有空填充标记的表，其中填充为它们提供了一个框阴影。其简单的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小提琴位于http://jsfiddle.net/Pank/4A9BM/

这里在使用border-collapse之后：在表格中的折叠会删除其中的span的框阴影..

否则，所有浏览器中的漏洞代码都可以运行..

请帮助这个相关的怪癖..

Answer 1

添加

<!doctype html>

位于HTML文档的顶部。它会工作正常。在IE10中测试

更新了答案。

屏幕截图：当我使用时 http://www.image-share.com/ijpg-2440-42.html

屏幕截图：不使用 http://www.image-share.com/ijpg-2440-43.html

http://www.image-share.com/ijpg-2440-44.html

这是它的链接。只是读它。 w3schools

边界崩塌的影响：崩溃;在IE浏览器<table> </table>的盒子阴影上

1 个答案: