Safari边框颜色悬停错误

所以我目前正面临一个问题，当你将鼠标悬停在Safari（6.0.2版本）的元素上时，该元素上的边框颜色看起来有点奇怪。为了让你分解我所做的元素，只是一个简单的列表元素，它除了左边外，在所有边上都有相同的边框颜色。Safari边框颜色悬停错误

下面有一个例子： http://cl.ly/MPkG

在悬停我添加一个简单的CSS3等级转变到元件以及改变边界颜色的灰度暗的阴影（不包括左手侧）。

这里是一个真正的粗糙小提琴显示问题： http://jsfiddle.net/dannykeane/N4jF5/

这工作完全正常在所有现代浏览器Safari的除外（版本6.0.2）。我也试着给这个元素添加一个backface-visibility:hidden;，但它仍然表现相同。

任何帮助，将不胜感激。

感谢

上的视频好功夫，但我不能观看。无论如何，考虑使用jsbin.com或jsfiddle.com而不是视频和屏幕截图。 – user1721135

如果你在safari中测试它，你会看到问题，这里有一个真实的快速模拟我所做的事情。 http://jsfiddle.net/dannykeane/N4jF5/ – user2009127

它在悬停（在铬上测试）时变得模糊。它做错了什么？ – user1721135

这可能一个未知的bug在Safari中，虽然该错误很有道理的，因为你正试图把一个较厚的边框左侧比箱壁的其余部分。用定义的border-radius可以看到出血。如果各边的厚度相等，即使有边界半径，也不会有任何溢出边界。

您可能还会注意到，如果您调整了左侧的边框厚度，除非您放大/缩小页面，否则出血将不可见。也许调整价值也无济于事，因为这是不稳定的，也是暂时的解决办法。

对于浏览器特定的错误，我们无能为力，只是一种解决方法。我们可以将较厚的边框分隔到围绕您的内容的下一个div。而且不要忘记删除左父格的1px宽的边框：

border-left: 0;

喜欢这个基本小提琴：http://jsfiddle.net/bgYhQ/

2013-01-31 12:41:30 Anne

回答