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

Question

所以可能有一个简单的答案，但我似乎无法让我的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的背景显示。

有什么想法吗？谢谢！

-Nate

Answer 1

如果您将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上测试

Answer 2

这是表中的ie9输入框阴影错误解决方案

input { box-shadow: 0px 0px 5px #3699FF; border-collapse: separate; }

border-collapse：分开; 是踢点

Answer 3

我担心无法复制您的问题，但是您的插入框阴影会出现语法问题。请尝试使用此代码：

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

Answer 4

仅在Chrome中注意到此1px问题（在Safari 5和FF 5中也经过测试）

http://jsfiddle.net/pxfunc/sZqV5/

单元格上的border似乎与问题有关，您可以删除单元格边框并且阴影是正确的。就像@Jason Gennaro已经发布的那样，单元格上的display:block也修复了阴影。

考虑将您的发现发布在Chromium Bug列表中：http://code.google.com/p/chromium/issues/list