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

【问题标题】：Border Radius / Overflow Problem in ChromeChrome中的边框半径/溢出问题
【发布时间】：2012-10-08 05:50:56
【问题描述】：

我有一个使用大量边界半径进行布局的网站。该问题与下面屏幕截图中的工作版本 (Firefox) 进行了比较（我也没有设计这个可怕的东西）。

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

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

我唯一能看到的是灰色框（“main_area”）边框半径实际上是由父级控制的，所以灰色背景可能溢出了。

Here is the link

还要注意 Opera 中也会出现同样的错误。我没有使用前缀，只是上面的css。 IE9的布局也很好。

谢谢

【问题讨论】：

看不到 CSS 的其余部分有点难。另外你的链接失效了，能再提供一个吗？
@brunn - 抱歉，已更正链接。 css 相当广泛，我不知道从哪里开始放什么，我可以粘贴我的整个 css？

标签： google-chrome webkit opera css

【解决方案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;
    } 
}

【讨论】：