Chrome 错误：border-radius + 与背景颜色相同的边框 -> 工件

Question

对不起这个钝标题； here's a jsfiddle example.

基本上，我在另一个里面有一个 div。大的有浅蓝色背景，小的有深蓝色背景。
我想在悬停时给较小的一个边框，所以我用相同大小的边框开始它，但颜色与背景相同（这样添加边框时它就不会四处移动）。

当有边框半径时，此边框与背景工件颜色相同。看看 Chrome：

不过 Safari 没问题：

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

Answer 1

让你的边框透明怎么样：

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/

Answer 2

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

它在您的 jsfiddle 示例 (http://jsfiddle.net/KPAVU/5/) 上工作得不是很完美，但使用真正的标记可能会有更好的结果。