Chrome CSS转换比例显示问题

Question

我在尝试使用变换比例CSS属性时遇到了一些问题。

这是我悬停的CSS：

#pricing-table .pricing-column:not(.labels):hover {
position: relative;
z-index: 50;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
-moz-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
box-shadow: 0 0 3px rgba(1, 1, 1, 0.3); }

这是结果，请注意一些列表项上的奇怪灰色边框： Screenshot of issue

之前我遇到过类似的chrome和CSS3转换问题，但从来没有弄清楚如何解决这些问题。非常感谢任何见解！感谢

这是现场演示： Demo Link

Answer 1

你可以尝试添加边框。我检查了你的代码，这很有用。

#pricing-table .pricing-column:not(.labels) li,
#pricing-table .pricing-column:not(.labels):hover li {
 border: 1px solid #FFF;
}

如果困扰你，你可以使用第n个孩子从第一个li中删除它。

#pricing-table .pricing-column:not(.labels):hover li:first-of-type {
border: none;
}