Chrome CSS 变换比例显示问题答案

【问题标题】：Chrome CSS transform scale display issuesChrome CSS 变换比例显示问题
【发布时间】：2014-03-07 23:22:45
【问题描述】：

我在尝试使用 transform scale 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

【问题讨论】：

这是一个关于 SCSS 的问题，而不是 CSS 或 CSS3。我已经编辑了标签。
编辑了我的帖子以包含由 SCSS 生成的 CSS 并将标签修复回 CSS。
惊人的问题！这似乎是浏览器渲染问题。

标签： css transform

【解决方案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;
}

【讨论】：

这种种有效。它确实缓解了问题，但是仍然可以看到不需要的行screenshot
嘿，我尝试添加 1px 实心#FFF 的轮廓，它删除了那些小的“剩余部分”。在您的 :nth-child(2) 上应用灰色（在您的情况下为#F7F7F7）。我正在使用最新的 chrome，它现在看起来很清晰 :)。希望对您有所帮助。