所以可能有一个简单的答案,但我似乎无法让我的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
答案 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