css - Safari 边框颜色悬停错误

Question

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

举个例子: http://cl.ly/MPkG

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

这是一个真正粗略的 fiddle 来说明这个问题: http://jsfiddle.net/dannykeane/N4jF5/

这在除 Safari(版本 6.0.2)之外的所有现代浏览器中都运行良好。我还尝试向该元素添加 backface-visibility:hidden; 但它的行为仍然相同。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

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

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

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

border-left: 0;

喜欢这个基本的 fiddle :http://jsfiddle.net/bgYhQ/