2011-09-23 83 views
0

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

enter image description here

所有的代码如下边境半径相同的格式:

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

我能看到的唯一事情是灰色框(“main_area”)边界半径实际上是由一个控制父母,所以也许灰色背景溢出。

Here is the link

还要注意在Opera中出现同样的错误。我不使用前缀,只是上面的CSS。 IE9的布局也很好。

由于

+1

这是有点难以看到CSS的其余部分。加上你的链接不工作,你可以提供另一个? – brunn

+0

@brunn - 对不起,更正了链接。 CSS是相当广泛的,我不知道从哪里开始放什么,我可以pastebin我的整个CSS? – rickyduck

回答

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