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

Question

对不起这个钝标题； 这是一个 jsfiddle 示例。

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

当存在边界半径时，此边界与背景伪影颜色相同。 看看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/ ）上不能完美运行，但使用真实标记可能会有更好的结果。