因此,当您将鼠标悬停在Safari(版本6.0.2)中的某个元素上时,我正面临一个问题,该元素上的边框颜色似乎有点奇怪。为了让您了解我所做的事情,元素只是一个简单的列表元素,除了左侧之外,所有边都有相同的边框颜色。
以下是一个例子: http://cl.ly/MPkG
悬停时,我会向元素添加一个简单的CSS3 Scale过渡,并将边框颜色更改为更深的灰色(不包括左侧)。
这是一个显示问题的真正粗略小提琴: http://jsfiddle.net/dannykeane/N4jF5/
除Safari(版本6.0.2)外,所有现代浏览器都能正常使用。我也尝试在此元素中添加backface-visibility:hidden;
,但它的行为仍然相同。
任何帮助都将不胜感激。
由于
答案 0 :(得分:1)
那个可能是 Safari中的一个未知错误,虽然这个错误很有意义,因为你试图在左边放置一个更粗的边框而不是其他边的盒子。通过定义border-radius
可见出血。如果所有边都有相同的厚度,即使有边界半径,也不会有任何溢出的边框。
除非您放大/缩小页面,否则您可能还会注意到,如果调整左侧的边框粗细,则不会出现渗色。也许调整这些值也无济于事,因为这将是不稳定的并且是暂时的解决方案。
我们无法对浏览器特定的bug做任何事情,而是一种解决方法。我们可以将较粗的边框分隔到您内容中的下一个div。并且不要忘记删除父div上剩下的1px边框:
border-left: 0;
喜欢这个基本的小提琴:http://jsfiddle.net/bgYhQ/