html - 表单元格上的CSS插入框阴影未对齐

因此，可能有一个简单的答案，但是我似乎无法让我的CSS插入框阴影在表单元格上正常工作。我有以下CSS规则:

table {
    border: 1px solid #aaa;
}
table th, td {
    width: 76px;
    height: 50px;
    vertical-align: middle;
    text-align: center;
}
tr {
    border: 1px solid #aaa;
}
td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
}
td.red { ... }
td.green { ... }

因此，我正在尝试向带有插入阴影的某些单元格添加.color和.red，.green等类，以使它们在表行中看上去是缩进的。由于某些原因，插图阴影未对齐1px。

我在这里张贴了问题的图片:

导致底部和右侧边缘具有1px的背景透过。

有任何想法吗？谢谢!

-内特

最佳答案

如果您将display: block;添加到td.color，则可以使用

td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
    display: block;
}

http://jsfiddle.net/jasongennaro/DjAfw/

在Chrome上测试

关于html - 表单元格上的CSS插入框阴影未对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6708184/