Chrome CSS变换比例显示问题

我收到了一些试图使用变换比例CSS属性的问题。Chrome 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

我已经与镀铬和CSS3转换类似问题之前和从未能够弄清楚如何解决它们。希望有任何见解！由于

这里的现场演示： Demo Link

来源

2014-02-10 nmford

这是关于SCSS的问题，而不是CSS或CSS3。我编辑了标签。 –

编辑我的帖子以包含由SCSS生成的CSS，并将标签固定回CSS。 – nmford

令人惊叹的问题！它似乎是浏览器呈现问题。 –

U可以尝试添加边框。我检查了你的代码，这工作。

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

U可以使用第n个孩子，如果是困扰u到从第一李将其删除。

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

来源

2014-02-10 15:05:58

这_kind of_ works。它缓解了问题，但不需要的线仍然可见[截图]（http://glui.me/?i=26pnqjq6rcv78fn/2014-02-10_at_10.10_AM.png/） – nmford

嘿，我tryed添加轮廓的1px固体#FFF，它删除了那些小的“剩余的”。在你的：第二个孩子（2）灰色的应用灰色（＃F7F7F7在你的情况）。我正在使用最新的铬，现在看起来很脆:)。希望能帮助到你。 –

Chrome CSS变换比例显示问题

回答

相关问题