확장 할 때 모서리가 둥근 모서리가 찢어지는 부분이 있습니다.

Question

Firefox에서 문제가되지 않는 것 같습니다. 그러나 사파리에서 눈에 012니다.

나는 모서리가 둥근 div와 인서트 테두리 및 지정된 너비가 있습니다. http://jsfiddle.net/jsoningram/fek5n/

왼쪽에서 div가 나 타나는 것을 볼 수 있습니다. 글쎄 실제로 그것은 깨지지 않지만 나타납니다. .beveled 클래스의 테두리 색상을 검정색으로 변경하면 표시됩니다. 테두리 스타일을 제거 할 수도 있으며 "누락 된 링크"가 반환됩니다.

HTML :

<div id="sub_nav" class="rounded_10 beveled"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 

는 CSS : 사전에

#sub_nav { 
    position: relative; 
    background: #e6e6e6; 
    width: 164px; 
    min-height: 300px; 
    float: left; 
    padding: 0px 0px 27px 0px; 
    z-index: 5; 
    margin: 10px 0 0 10px; 
} 

#sub_nav li { 
    position: relative; 
    height: 50px; 
    width: 160px; 
    background: #ccc; 
    margin: 0px 0px 1px 1px; 
} 

#sub_nav li:first-child { 
    margin-top: 27px; 
} 

    .rounded_10 { 
    -webkit-broder-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    behavior:url(_/inc/PIE.htc); 
} 

    .beveled { 
    border: 1px solid #fbfbfb; 
    border-style: inset; 
} 

감사합니다 ...

이 어떻게 국경 스타일과 관련이있다

Answer 1

: 인 세트 작업, 테두리와 배경색이 서로 너무 가깝다는 사실 등이 있습니다.

삽입은 3 차원 스타일 효과이지만 1px 테두리가있는 경우 효과를 그리는 방법을 찾는 데 어려움이 있습니다. 변경하는 경우

.beveled {border: 30px solid red; border-style:inset;} 

달성하려는 내용이 표시됩니다. 기본 색상을 취한 다음 어두워 지거나 밝게하여 효과를냅니다. 당신은 연한 회색이 그 부분을 위해 흰색으로 번쩍하고 있습니다.

그래서 border-style : inset을 제거한 다음 테두리 색을 변경하면 비즈니스에 있어야합니다.

.beveled {border: 1px solid #ccc;} 

Answer 2

약간의 실험을했는데 수동으로 삽입면을 만들 때 같은 문제가 나타나는 것을 발견했습니다.

.beveled { 
    border-top: 2px solid #aaa; 
    border-left: 2px solid #aaa; 
    border-right: 2px solid #efefef; 
}' 

나는이 문제를 보여주기 위해 jsFiddle을 최소한으로 만들었습니다.

너비와 관련이 있습니다. 설명 할 수는 없지만 예제에서 폭을 400px로 변경하면 그 차이가 사라집니다. 사실 높이가 너비보다 큰 경우에만 간격이 전혀 나타나지 않습니다.

IE9 이상에서도 완벽하게 보이기 때문에 웹킷과 파이어 폭스의 렌더링 문제라고 생각합니다.

아마 모던이 여기에 도움이 될 것입니다. http://modernizr.com/

Answer 3

와우. 이것은 이상합니다. #sub_nav를 너비 180 픽셀로 설정하면 문제가 해결되는 것 같습니다. http://jsfiddle.net/fek5n/11/