google-chrome - 具有背景颜色和边框半径的 Webkit 中的 Renderin-Bug

Question

如果我使用 float 的 block 元素作为图像的容器并且图像有一些边框半径，则所有 webkit 浏览器在呈现容器元素的背景颜色时都会出现问题。在 IE 11 和最新的 firefox 中一切正常!

这里有一个 fiddle 作为例子:http://jsfiddle.net/5wZeG/2/

CSS:

.galerie-image {
    background: #00DDDD;
    border-radius: 10px;
    height: 200px;
    width: 200px;
    display: block;
    float: left;
}
.galerie-image img {
    border: 0;
    border-radius: 50% 10px;
    height: auto;
    margin-bottom: -4px;
    width: 100%;
}

HTML:

<a class="galerie-image" target="_blank" title="The Quadrat" href="http://google.com">
    <img alt="Quadrat" title="The Quadrat" src="http://dummyimage.com/400x400/000/fff&text=Placeholder" />
</a>

和一张图片:FF vs chrome:

这是一个错误还是有一个简单的解决方案？ (提前致谢!)

Answer 1

这可能是 Opera 上发生的渲染错误，临时修复方法是将图像的宽度设置为 width: 99.99999%;

.galerie-image img {
border: 0;
border-radius: 50% 10px;
height: auto;
margin-bottom: -4px;
width: 99.99999%;
}