如何摆脱烦人的 iframe 边框？答案

【问题标题】：How to get rid of the annoying iframe borders?如何摆脱烦人的 iframe 边框？
【发布时间】：2015-03-12 14:41:30
【问题描述】：

小提琴（它是我实际代码的骨架）：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 中运行我的实际代码时，它显示为灰色边框，如下图所示：

【问题讨论】：

您是否尝试过收到的解决方案？
当然我尝试了解决方案。这就是为什么我说现有的答案没有帮助。
能给个网站的链接吗？如您所见，我的 sn-p 正在工作。
刚刚搜索了与我的问题相同的句子

标签： html css iframe

【解决方案1】：

只需将其添加到您的 CSS 中：

iframe {    
 border: 0;
}

见下面的sn-p：

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

【讨论】：

【解决方案2】：

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

并检查下面的链接

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

【讨论】：

【解决方案3】：

另一种方法是使用 frameBorder="0"，我看到你已经尝试过了，但错过了大写的 'B'

【讨论】：

frameborder 不区分大小写。