google-chrome - 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;
    } 
}