Làm cách nào để thoát khỏi biên giới iframe gây phiền nhiễu?

Question

Các fiddle (đó là một bộ xương của mã thực tế của tôi): http://jsfiddle.net/nkipe/6bhee8c8/
Mã:
CSS

* 
{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; padding: 0; 
} 
html 
{ 
    height: 100%; 
} 
body 
{ 
    height: 100%; 
    background: #FEFFFB; 
    font-family: arial, verdana; 
} 
#layoutContainer 
{ 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
} 

#iframeHeader 
{ 
    width: 100%; 
    height: 50px; 
    border: 0; 
} 
#iframeStatusBar 
{ 
    width: 100%; 
    height: 15px; 
    border: 0; 
} 
#iframeMainMenu 
{ 
    width: 200px; 
    height: 100%; 
} 
#iframeCenterContent 
{ 
    width: 100%; 
    height: 100%; 
    top: 65px; 
    left: 200px; 
    position: fixed; 
} 
#iframeFooter 
{ 
    width: 100%; 
    height: 50px; 
    bottom: 0px; 
    left: 200px; 
    position: fixed; 
} 

HTML

<div id="layoutContainer"> 
    <iframe id="iframeHeader" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> 
    <iframe id="iframeStatusBar" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> 
    <iframe id="iframeMainMenu" src="#"></iframe> 
    <iframe id="iframeCenterContent" src="#"></iframe> 
    <iframe id="iframeFooter" src="#"></iframe>    
</div> 

Và khi tôi chạy mã thực tế của tôi trong Chrome, nó cho thấy lên như đường viền màu xám như được hiển thị trong hình ảnh này:

Answer 1

chỉ thêm video này vào CSS của bạn:

iframe {  
border: 0; 
} 

Xem đoạn dưới đây:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    background: #FEFFFB; 
 
    font-family: arial, verdana; 
 
} 
 

 
/*ADD THIS BELOW */ 
 
iframe { 
 
    border: 0 ; 
 
} 
 
/*END*/ 
 

 
#layoutContainer { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
} 
 
#iframeHeader { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 0; 
 
} 
 
#iframeStatusBar { 
 
    width: 100%; 
 
    height: 15px; 
 
    border: 0; 
 
} 
 
#iframeMainMenu { 
 
    width: 200px; 
 
    height: 100%; 
 
} 
 
#iframeCenterContent { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 65px; 
 
    left: 200px; 
 
    position: fixed; 
 
} 
 
#iframeFooter { 
 
    width: 100%; 
 
    height: 50px; 
 
    bottom: 0px; 
 
    left: 200px; 
 
    position: fixed; 
 
}

<div id="layoutContainer"> 
 
    <iframe id="iframeHeader" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> 
 
    <iframe id="iframeStatusBar" src="#" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe> 
 
    <iframe id="iframeMainMenu" src="#"></iframe> 
 
    <iframe id="iframeCenterContent" src="#"></iframe> 
 
    <iframe id="iframeFooter" src="#"></iframe> 
 
</div>

Answer 2

Áp dụng mã này trong css tập tin iframe{border:none;}.

Và kiểm tra bên dưới liên kết

http://jsfiddle.net/6bhee8c8/1/

Answer 3

Một cách khác để làm điều này là với frameborder = "0", tôi thấy bạn đã cố gắng này, nhưng bỏ lỡ hoa 'B'