Safari边框颜色悬停bug

时间:2013-01-24 22:20:25

标签: css css3 safari hover border-color

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

以下是一个例子: http://cl.ly/MPkG

悬停时,我会向元素添加一个简单的CSS3 Scale过渡,并将边框颜色更改为更深的灰色(不包括左侧)。

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

除Safari(版本6.0.2)外,所有现代浏览器都能正常使用。我也尝试在此元素中添加backface-visibility:hidden;,但它的行为仍然相同。

任何帮助都将不胜感激。

由于

1 个答案:

答案 0 :(得分:1)

那个可能是 Safari中的一个未知错误,虽然这个错误很有意义,因为你试图在左边放置一个更粗的边框而不是其他边的盒子。通过定义border-radius可见出血。如果所有边都有相同的厚度,即使有边界半径,也不会有任何溢出的边框。

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

我们无法对浏览器特定的bug做任何事情,而是一种解决方法。我们可以将较粗的边框分隔到您内容中的下一个div。并且不要忘记删除父div上剩下的1px边框:

border-left: 0;

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