如何摆脱烦人的iframe边框？

Question

小提琴(它是我实际代码的骨架):http://jsfiddle.net/nkipe/6bhee8c8/
代码:
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>

当我在Chrome中运行我的实际代码时,它会显示为灰色边框,如下图所示:

Answer 1

只需将其添加到您的CSS:

iframe {    
 border: 0;
}

请参阅下面的代码段:

* {
  -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>