Chrome에서 테두리 반경/오버플로 문제가 발생했습니다.

Question

레이아웃에 테두리 반경이 많은 사이트가 있습니다. 이 문제는 아래 스크린 샷의 실제 버전 (Firefox)과 비교됩니다 (이 끔찍한 일은 설계하지 않았습니다).

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

내가 볼 수있는 유일한 것은 회색 상자 ("main_area") 국경 반경이 실제로 의해 제어된다 :

모든 코드는 국경 반경에 대해 동일한 형식을 따릅니다 부모님, 회색 배경이 범람하고있을 수도 있습니다.

Here is the link

또한 동일한 오류가 오페라에 발생합니다. 전 접두사를 사용하지 않고 위의 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; 
    } 
}