Chrome bug:border-radius + border与背景颜色相同 - >文物

时间:2011-05-30 02:45:57

标签: html css google-chrome webkit

对于这个钝的标题感到抱歉; here's a jsfiddle example

基本上,我在另一个内部有一个div。大的浅蓝色背景,小的浅蓝色背景 我希望在悬停时给较小的一个边框,所以我用相同尺寸的边框开始它,但颜色与背景相同(这样在添加边框时它不会移动)。

此边框与边框半径时的背景工件颜色相同。看看Chrome:
enter image description here

但Safari很好:
enter image description here

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

2 个答案:

答案 0 :(得分:2)

如何让边框透明:

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/

答案 1 :(得分:1)

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

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