4

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

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

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

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

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

任何帮助，将不胜感激。

谢谢

4

1 回答 1

1

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

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

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

border-left: 0;

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

于 2013-01-31T12:41:30.340 回答