铬错误:边框半径+与背景颜色相同的边框 - >工件

问题描述:

对不起,标题为钝; here's a jsfiddle example铬错误:边框半径+与背景颜色相同的边框 - >工件

基本上,我有一个div里面的另一个。大的有浅蓝色的背景,小的有深蓝色的背景。
我想给较小的一个悬停的边框,所以我用相同的大小边界开始它,但是与背景相同的颜色(以便在添加边框时它不移动)。

当边框半径存在时,此边框与背景工件颜色相同。看看浏览器:
enter image description here

但Safari是罚款:
enter image description here

这是一个已知的bug?我可以提交报告吗?
更重要的是,是否有解决方法?

+0

此处必须已有报告。 – BoltClock 2011-05-30 03:03:25

+0

在你的小提琴中,我在safari中看到了相同的神器。截图:http://cl.ly/1C022t033N04190x201y – imjared 2011-05-30 04:56:13

如何使你的边框透明:

border: 2px solid transparent; 

要在IE6这项工作,你可以添加:

*html #inner 
{ 
    border-color: pink; 
    filter: chroma(color=pink); 
} 

IE的解决方法是从http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/

+0

不错,谢谢!唯一的区别是边框与内部元素的颜色相同,而不是背景。不知道为什么... – Nathan 2011-05-30 13:49:29

有时可以解决这些问题通过使用background-clip: padding-box;

它在你的jsfiddle例子(http://jsfiddle.net/KPAVU/5/)上不能很好地工作,但在真正的标记中可能会有更好的结果。

+0

其实;这在Chrome上引入了我的问题;不再是一个好的解决方案:) – 2016-01-05 15:10:31