表格单元格上的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; }

边界崩溃:分开; 是踢点