logo标签列表

如何去掉烦人的iframe边框？

htmlcssiframe
6

下面是我的代码框架（这只是实际代码的骨架）: 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中运行实际代码时，它显示为灰色边框，如下图所示：
enter image description here

你尝试过收到的解决方案了吗？ - dippas
当然我尝试过这些解决方案。这就是为什么我说现有的答案没有帮助的原因。 - Nav
你能给出网站的链接吗？正如你所看到的，我的代码片段正在运行。 - dippas
刚刚在谷歌上搜索了与我的问题相同的句子。 - Nav
如果在IE中frameborder属性无法正常工作，我模糊地记得某些版本坚持使用大写字母B的frameBorder。 - Ulrich Schwarz
谢谢Ulrich。我会尝试的。 - Nav
3个回答
9

只需将以下代码添加到您的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>

2
0

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

frameborder 不区分大小写。 - Mr Lister
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接