Google chrome Webkit中带有背景色和边框半径的Renderin Bug

Google chrome Webkit中带有背景色和边框半径的Renderin Bug,google-chrome,webkit,background-color,css,Google Chrome,Webkit,Background Color,Css,如果使用浮动块元素作为图像的容器,并且图像具有一定的边界半径,则所有webkit浏览器在渲染容器元素的背景色时都会出现问题。在IE11和最新的firefox中,一切都很好 这里有一把小提琴作为例子: css: .galerie-image { background: #00DDDD; border-radius: 10px; height: 200px; width: 200px; display: block; float: left; } .g

如果使用浮动块元素作为图像的容器,并且图像具有一定的边界半径,则所有webkit浏览器在渲染容器元素的背景色时都会出现问题。在IE11和最新的firefox中,一切都很好

这里有一把小提琴作为例子:

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:


这是一个bug还是有一个简单的解决方案?(提前感谢!)

这可能是一个渲染错误,opera上也会出现这种情况,临时修复方法是将图像的宽度设置为宽度:99.99999%

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

非常感谢。它起作用了!新的歌剧院也使用webkit。所以我认为这是一个webkit问题。很好的解决方案!