如何摆脱烦人的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>

Answer 2

在css档案iframe{border:none;}中应用此代码。

并查看以下链接

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

Answer 3

执行此操作的另一种方法是使用frameBorder =＆＃34; 0＆＃34;，我看到你尝试了这个但是错过了大写＆＃39; B＆＃39;