div 외부에서 iframe 배경이 오버플로됩니까?

Question

div 태그 내에 iframe이 있고 오버플로 : 숨김 및 50px의 경계 반경이 모두 원으로되어 있습니다. iframe 소스는 버튼이있는 .aspx 페이지입니다. 버튼을 클릭하면 포스트가 되돌아옵니다. 포스트 백에 나는 아무것도에서 배경 컬러를 변경해야합니다.

iframeBody.Attributes.Add("Style", "background-color:#FF9090"); 

그것은 (IE!? 놀라운!에 파인) 파이어 폭스와 인터넷 익스플로러에서 완벽하게 작동하지만 크롬에이 사각형을 형성하는 배경 색상을 오버플로 보인다. (다른 모든 컨텐츠는 완벽하게 표시됩니다. 배경이 se 's 거리는 것입니다.) 어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

샘플에 표시되는 사각형은 iframe 테두리입니다. 당신은 쉽게 스타일로 그것을 제거 할 수 있습니다

iframe { 
    border: 0; 
} 

iframe이의 내용은 분명히 컨테이너 div 오버 플로우 사업부는 (그 문제에 대한, 또는 relative) position: absolute가있는 경우. 왜 그렇게 될지 확신 할 수는 없지만 div 및 iframe 만 포함 된 컨테이너에서 해당 div를 래핑하고 해당 요소로 위치를 이동하면이 문제를 해결할 수 있습니다.

<div id="outer"> 
    <div> 
     <iframe></iframe> 
    </div> 
</div> 

#outer { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
} 

#outer > div { 
    border-radius: 50px; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    border: 5px solid #D3D3D3; 
} 

iframe { 
    border: 0; 
    background-color: pink; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

이것을 처리하면 iframe이 테두리의 일부와 겹쳐 있음을 알 수 있습니다. 이것은 position: absolute을 제거하려는 경우 크롬에서 볼 수있는 것과 동일한 동작입니다.

이제 래퍼가 생겼으므로 경계를 해당 래퍼로 이동하면 문제가 해결되고 멋진 원 테두리가 생깁니다. 모든 최신 브라우저에서 동일합니다. 당신이 모두 된 div에 border-radius 속성을 유지하지만, #outer에 border 속성을 이동하려는

참고.

#outer { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    border: 5px solid #D3D3D3; 
    border-radius: 55px; 
} 

#outer > div { 
    border-radius: 50px; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
} 

iframe { 
    border: 0; 
    background-color: pink; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

Working demo

Answer 2

: 래퍼에 테두리가, 그 아이가되지를 않기 때문에 매끄러운 원, 그것은 또한 약간 큰 테두리 반경이 필요합니다 그래서 지금, 래퍼는 약간 큰 것

다른 접근법이 있습니다. webkit-mask-image를 사용하고 마스크로 사용할 투명 PNG 이미지를 만들 수 있습니다 (물론 그라디언트 또는 복잡한 모양으로도 작동합니다). 현재 웹킷 브라우저 (Safari/Chrome 등)에서만 작동하지만 이는 50 % 미만인 것과 같습니다. 잠재 고객에 따라 옵션이 될 수 있습니다.