Chrome中的边框半径/溢出问题

Question

我有一个使用大量border-radius进行布局的网站。这个问题与下面的截图中的工作版本（Firefox）相比较（我也没有设计这个可怕的东西）。

所有代码都遵循相同的边框半径格式：

border-top-left-radius: 25% 54%;
border-bottom-left-radius: 19% 54%;

我唯一能看到的是灰色框（“main_area”）border-radius实际上是由父母控制的，所以灰色背景可能会溢出。

Here is the link

另请注意Opera中出现相同的错误。我没有使用前缀，只是上面的CSS。 IE9中的布局也很好。

由于

Answer 1

百分比维度是根据默认字体大小计算的，因此请使用重置样式表或向使用百分比的选择器添加特定于浏览器的字体大小，例如：

div#container > #main > #main_area > .content > .holder {
  font-size: 10px;
}

/* Firefox reset */
@-moz-document url-prefix() {
    div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    }
}

/* IE9 reset */
@media all and (monochrome: 0) { 
   div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    } 
}