gpt4 book ai didi

html - border-collapse : collapse; on the box shadow in IE browsers 的影响
转载 作者:太空宇宙 更新时间:2023-11-03 18:21:03 25 4
gpt4 key购买 nike

我用空的 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 相关的怪癖..

最佳答案

只需添加

<!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

关于html - <table> border-collapse : collapse; on the box shadow in IE browsers 的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21823007/

25 4 0