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

时间:2011-07-15 14:04:33

标签: 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。

我在这里发布了问题的图片:

enter image description here

导致底边和右边有1px的背景显示。

有什么想法吗?谢谢!

-Nate

4 个答案:

答案 0 :(得分:10)

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

答案 1 :(得分:5)

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

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

border-collapse:分开; 是踢点

答案 2 :(得分:1)

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

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;
}

答案 3 :(得分:0)

仅在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