IE11과 Edge에서 border-radius로 유령 'border'가 나타납니다.

IE11과 Edge (Windows 10)에서 다음 HTML/CSS는 없어야하는 이상한 투명 테두리를 표시합니다. IE11과 Edge에서 border-radius로 유령 'border'가 나타납니다.

<!DOCTYPE html><html> 
<head> 
    <style> 
     body { 
      background-color:red; 
      font-size: 10pt; 
     } 

     .menu { 
      background-color: #5f6062; 
      overflow:hidden; /* To contain floats */ 
      box-sizing: content-box; 
     } 

     .right-menu { 
      float:right; 
      margin:auto; 
      padding:0 0 0 20px; 
      list-style: none; 
     } 

     .spacer { 
      background-color: #ffffff; 
      height: 20px; 
     } 

     .content { 
      background-color: #ffffff; 
      border-radius:0 0 10px 10px; 
      background-clip: content-box; 
     } 
    </style> 
</head> 
<body> 
    <div class="menu"> 
     <ul class="right-menu"> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <div class="spacer"></div> 
    <div class="content"> 
     <div class="content-title">There shouldn't be a 'border' above this...</div> 
    </div> 
</body> 
</html>

JSFiddle

(당신은 JSFiddle에서와 밖으로 '경계'페이드 볼 수직 에을 창 크기를 조정해야 할 수도 있습니다 -. 심지어 낯선 사람이다)

가장 흥미로운에게 문제는 border-radius에 의해 발생한 것으로 보입니다. 제거하면 '경계'가 사라집니다. 또한 다른 요소 (예 : .menu div)를 제거하면 사라질 것이지만,이 문제가있는 사이트의 구조를 망칠 필요가 없기 때문에 옵션이 적습니다.

해결 방법으로 background-clip: content-box 또는 padding-box이라는 멘션을 발견했지만 여기서는 효과가없는 것 같습니다.

또한 데모 크기를 줄이기 위해 JSFiddle에서 테두리를 표시했지만 일반 HTML 파일에서는 보이지 않는 코드가 생겼습니다. JSFiddle과 일반 HTML 파일 모두에서 '테두리'를 표시 할 수있는 가장 작은 크기입니다.

는 EDGE의 Platform Issues에 버그 발견하지만 여전히 해결 방법을 찾을 싶습니다 ... 그것은 IE처럼 보이는

출처

2017-12-15 Goozak

"스페이서"요소 란 무엇입니까? 그것을 title 요소의 padding-top으로 바꾸면 문제가 사라집니다 ... – CBroe

이것은 또한 요소의 'float'과 관련이 있습니다. 문제가 가라 앉는 지 확인하려면'float : left' 또는'float : right'를 지정하십시오. 제 경험으로 볼 때이 같은 요소들이 부트 스트랩의'col-md-12'와 같은 전역 클래스를 갖는 것이 훨씬 쉽습니다. 이렇게하면 크로스 브라우저 스타일링이 훨씬 쉬워집니다. –

@CBroe : 샘플 코드에서 'spacer'요소의 이름이 바뀌었고 실제 코드에 다른 요소가 많이 포함되어 있습니다 :-) @BRO_THOM : Fiddle에서 'float'을 시도해 보았지만 테두리가 계속 나타납니다. 부트 스트랩을 사용하지 않고 변경 사항을 최소한으로 유지하려는 기존 웹 사이트의 모양을 업데이트하려고합니다. – Goozak

가 border-radius를 표시하는 투명한 경계를 렌더링되지만 아래로 더 '배경'색상을 선택합니다 레이어가 있어야합니다 (내 샘플에서는 흰색 대신 빨간색 사용).

그래서 나는 두 가지 요소는이 버그가있는, 내 실제 페이지에서 ... 해결 방법으로

갔다. 하나의 해결 방법은 border-radius으로 다른 요소의 background-color을 설정하고 다른 하나는 으로 설정하고 실제 border은 요소 배경의과 같은 색으로 설정합니다.

출처

2017-12-18 13:26:18 Goozak

IE11과 Edge에서 border-radius로 유령 'border'가 나타납니다.

답변

관련 문제