사파리/크롬의 둥근 모서리

모든 사람이이 문제를 해결하기 위해 권장하는 모든 것을 시도 했으므로 도움을 요청하고 있습니다. 둥근 모서리 문제가 있습니다. 파이어 폭스에서는 그렇지만 사파리 나 크롬에서는 그렇지 못합니다. 국경 반경 : 나는 그런 형식으로 이런 종류의 모든 것을 받고 "%"로 반대로 "픽셀"작업으로 모든 종류의 조합을 시도했습니다사파리/크롬의 둥근 모서리

#sidebar4_content{ 
    margin: 0 auto; 
    float: right; 
    width:80%; 
    background-color: #F2F2F2; 
    margin-top: 130px; 
    height: 600px; 
    border: solid 5px #1C1C1C; 
    border-top-left-radius:90%;/*Opera 10.5, IE 9*/ 
    border-bottom-left-radius:90%;/*Opera 10.5, IE 9*/ 
    -moz-border-radius-bottomleft: 90%; /*Disabled for FF1+*/ 
    -moz-border-radius-topleft: 90%;/*Disabled for FF1+*/ 
    -webkit-border-top-left-radius: 90%;/* Saf3+, Chrome*/ 
    -webkit-border-bottom-left-radius: 90%;/* Saf3+, Chrome*/ 
}

: 여기 내 코드의 0 픽셀 90 픽셀 90 픽셀 0 픽셀; 그리고 그 의견은 누군가가 그걸 추천했지만 아무 것도 작동하지 않기 때문에 제가 시도한 것입니다. 이상한 점은 Safari와 Chrome에서 모서리를 둥글게하지만 측면을 지정해도 10px 및 4면 모두 모서리가 둥글다는 것입니다. 제발 도와주세요!

http://jsfiddle.net/VTgAn/

을 내가 크롬 요소 검사에서 볼 때 예상대로이 규칙을 사용하고 있습니다 : 내가 jsfiddle에 그대로 붙여 넣을 때

출처

2014-07-20 user3857046

jsfiddle에서 재현 할 수 있습니까? –

그 코드는 크롬에서 나를 위해 작동하는 것 같다

-webkit-border-top-left-radius: 90%;/* Saf3+, Chrome*/ 
-webkit-border-bottom-left-radius: 90%;/* Saf3+, Chrome*/

충돌을 일으킬 수있는 다른 CSS가있을 수 있습니까? 요소를 검사 할 때 어떤 모습입니까?

출처

2014-07-20 02:28:10 Laurel

CSS와 충돌하지 않으셔도됩니다. 나를 위해 FF로와 크롬 에서이 CSS를 바이올린 때 정확히 똑같이 나온다. (fiddle)

그것이 않는 경우, 뭔가 당신이 여기 나타났다 당신의 CSS를 위압되어 작동하는지 확인하기 위해! 중요 태그를 강제로 시도, 당신은 느릅 나무 하나가 과잉 인보고 크롬의 DEVMODE을 조사한다 판결.

너무 :

#sidebar4_content{ 
margin: 0 auto; 
float: right; 
width:80%; 
background-color: #F2F2F2; 
margin-top: 130px; 
height: 600px; 
border: solid 5px #1C1C1C; 
border-top-left-radius:90% !important;/*Opera 10.5, IE 9*/ 
border-bottom-left-radius:90% !important;/*Opera 10.5, IE 9*/ 
-moz-border-radius-bottomleft: 90% !important; /*Disabled for FF1+*/ 
-moz-border-radius-topleft: 90% !important;/*Disabled for FF1+*/ 
-webkit-border-top-left-radius: 90% !important;/* Saf3+, Chrome*/ 
-webkit-border-bottom-left-radius: 90% !important;/* Saf3+, Chrome*/ 
}

출처

2014-07-20 02:28:12

고마워요, 케빈! 네 말이 맞아, 잘된거야! 요소를 검사하고 가져온 파일이 종료되어 라이브 편집을하지 못한다는 사실을 깨달았습니다. 당혹 스럽습니다! 도와 주셔서 정말 감사합니다! – user3857046

문제가있는 사람을 찾았다는 소식을 듣고 반갑습니다! 그리고 나는 도움이 될 수있어서 기쁩니다. 해피 코딩! :) –

그것은 크롬 및 사파리에 나를 위해 잘 작동합니다. 다른 두 모서리를 0으로 설정해보세요.

-webkit-border-bottom-right-radius: 0;/* Saf3+, Chrome*/ 
-webkit-border-top-right-radius: 0;/* Saf3+, Chrome*/

출처

2014-07-20 02:31:31

사파리/크롬의 둥근 모서리

답변

관련 문제