Safari边框颜色悬停bug

Question

目前我面临一个问题，当在Safari（版本6.0.2）悬停在元素上时，该元素的边框颜色似乎会出现一些问题。为了让你更好地理解我所做的事情，该元素只是一个简单的列表元素，其四周都有相同的边框颜色，除了左边。

这里是一个例子： http://cl.ly/MPkG

悬停时，我给元素添加了一个简单的CSS3 Scale过渡效果，并将边框颜色更改为较深的灰色（不包括左侧）。

这里有一个非常粗略的代码片段来展示这个问题： http://jsfiddle.net/dannykeane/N4jF5/

在所有现代浏览器中，这个方法都可以完美地运行，但在Safari（版本6.0.2）中仍然存在问题。我还尝试在该元素上添加backface-visibility:hidden;，但它仍然表现得相同。

任何帮助将不胜感激。

谢谢

- user2009127

---

视频做得不错，但是我无法观看。无论如何，考虑使用jsbin.com或jsfiddle.com代替视频和截图。 - user1721135

这是我做的一个快速模拟，如果你在Safari中测试它，你会看到问题。http://jsfiddle.net/dannykeane/N4jF5/ - user2009127

在悬停时变得模糊（在Chrome上进行测试）。它做错了什么？ - user1721135

这是在Safari中发生的情况。 - user2009127

它也发生在 Fiddle 中 http://cl.ly/MPon - user2009127

我在底部和顶部边框上看到了一块奇怪的黄色补丁。在我看来，这似乎是Safari中的一个错误。 - Oisin Lavery

Answer 1

可能是Safari中的一个未知bug，尽管这个bug很有道理，因为您试图在盒子的左侧放置比其他边缘更粗的边框。如果定义了border-radius，则会出现溢出情况。如果所有边都具有相等的厚度，即使有border-radius，也不会有任何溢出的边框。

您可能还会注意到，如果您调整左侧的边框厚度，除非缩放页面，否则不会出现溢出。也许调整值也无济于事，因为这将是不稳定的且是一种临时解决方法。

我们无法处理特定于浏览器的bug，但可以使用解决方法。我们可以将更粗的边框分离到包围内容的下一个div中。并且不要忘记在父div上删除1px的左边框。

border-left: 0;

像这个基本的代码片段：http://jsfiddle.net/bgYhQ/

- Anne