[javascript] IE8에서 Iframe의 테두리를 제거하는 방법


Answers

CSS를 통해 설정을 시도 했습니까?

iframe {
    border:0px none transparent !important;
}

또한 marginheight="0" marginwidth="0" frameborder="0" 합니다. 동일한 IE 문제에 대한이 게시물에서 가져온 것입니다.

Question

내부에 iframe이있는 대화 상자를 만들고 있는데 문제는 테두리가 IE8에서 계속 표시된다는 것입니다. 다른 브라우저에서는 완벽하게 작동합니다.

이것은 내가 시도한 것이며, 나는 또한 국경을 시도 : 없음

$(d.dialog).find('#MyCoolDialogInner').html('<iframe src="/apex/EscalationForm?id={!Case.Id}" height="495" width="380" marginheight="0" marginwidth="0" frameborder="0"/>'); 

미리 감사드립니다.




IE8은 iFRAMES와 관련해서는 불편 함을 느낍니다. "Frameborder"는 HTML5에서 사용되지 않으므로 IE8에서 가장 쉬운 옵션이지만 장기적인 솔루션은 아닙니다.

컨테이너 안쪽에 iFRAME을 배치하여 테두리와 스크롤 막대를 숨겼습니다. iFRAME 컨테이너 자체는 웹 페이지의 전체 위치 지정을 위해 div 안에 있습니다. 상단 테두리와 왼쪽 테두리를 숨기려면 iFRAME 자체가 절대 위치에 있고 음수 여백이 위쪽과 왼쪽 모두에 적용됩니다. 절대적으로 배치 된 iFRAME의 너비와 높이는 100 % 이상으로 코딩되어야합니다. 그래야 오른쪽 및 아래쪽 경계가 표시되지 않는 부모 크기를 초과합니다 (스크롤 막대도 표시되지 않음). 이 기술은 또한 iFRAME 컨테이너가 컨테이너를 보유하는 div뿐만 아니라 백분율을 사용하기 때문에 iFrame을 반응 적으로 만듭니다. 물론 iFRAME 상위 div는 overflow : hidden으로 설정되어야합니다.

다음은 예제 코드입니다.

    /*THE PARENT DIV FOR THE iFRAME CONTAINER*/
    .calcontainer
        {
        width:100%;  /*adjust iFrame shrinking here - if floating use percentage until no white space around image.*/   
        max-width:200px;     
        margin:auto;     
        }


    /*THE RELATIVE POSITIONED CONTAINER FOR THE iFRAME*/

    .calinside  /*container for iFRAME - contents will size huge if the container is not contained and sized*/
        {   
        position:relative; /*causes this to be the parent for the absolute iFRAME*/
        padding-bottom: 100%; /* This is the aspect ratio width to height ratio*/
        height: 0;
        overflow:hidden; /*hides the parts of the iFRAME that overflow due to negative margins and over 100% sizing*/     
        }


/*THE ABSOLUTE POSITIONED iFRAME contents WITH NEGATIVE MARGINS AND OVER 100% SIZE IS CODED HERE.  SEE THE NORMAL SETTINGS VERSUS THE IE8 SETTINGS AS MARKED.  A SEPARATE CSS FILE IS NEEDED FOR IE8 WITH A CONDITIONAL STATEMENT IN THE HEAD OF YOUR HTML DOCUMENT/WEB PAGE*/

    .calinside iframe
        {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;/*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        height: 103% !important; /*must expand to hide white space to the right and below.  Hidden overflow by parent above*/
        /*IE8*/top: -2%;
        /*IE8*/left: -2%;   
        /*IE8*/width: 114% !important;/*For IE8 hides right border and scroll bar area that is white*/  
        /*IE8*/height: 105% !important; /*hide white space and border below.  Hidden overflow by parent above*/          
        }



Links