Ошибка Chrome: border-radius + border того же цвета, что и фон -> артефакты

Question

Извините за тупой заголовок; вот пример jsfiddle .

По сути, у меня есть 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/),, но может иметь лучшие результаты с реальной разметкой.