如何摆脱烦人的 iframe 边框？

Question

fiddle（这是我实际代码的骨架）：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;} 中应用此代码。

并检查下方 link

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

Answer 3

另一种方法是使用 frameBorder="0"，我看到你已经试过了，但没有输入大写 'B'

如何摆脱烦人的 iframe 边框？

How to get rid of the annoying iframe borders?

html

css

iframe