2011-09-23 78 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; 
    } 
}