Safari 边框颜色悬停错误答案

【问题标题】：Safari border-color hover bugSafari 边框颜色悬停错误
【发布时间】：2013-01-08 19:56:41
【问题描述】：

因此，当您将鼠标悬停在 Safari（版本 6.0.2）中的某个元素上时，我目前面临一个问题，该元素上的边框颜色似乎有点奇怪。为了让您了解我所做的事情，该元素只是一个简单的列表元素，除了左侧之外，所有边的边框颜色都相同。

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

在悬停时，我向元素添加了一个简单的 CSS3 缩放过渡，并将边框颜色更改为较深的灰色阴影（不包括左侧）。

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

这在除 Safari（版本 6.0.2）之外的所有现代浏览器中都可以正常工作。我也尝试向这个元素添加backface-visibility:hidden;，但它的行为仍然相同。

任何帮助将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

这可能是 Safari 中的一个未知错误，尽管该错误很有意义，因为您试图在左侧放置一个比其余边更厚的边框的盒子。定义为border-radius 时可以看到出血。如果四边的厚度相等，即使有边界半径，也不会有任何溢出的边界。

您可能还会注意到，如果您调整左侧的边框粗细，出血将不可见，除非您放大/缩小页面。也许调整值也无济于事，因为这将是不稳定的并且是临时解决方案。

对于浏览器特定的错误，我们无法做任何事情，但有一种解决方法。我们可以将较粗的边框与围绕您的内容的下一个 div 分开。并且不要忘记移除父 div 上留下的 1px 边框：

border-left: 0;

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

【讨论】：