【问题标题】:Iframe and Firefox/IE bugiframe 和 Firefox/IE 错误
【发布时间】:2012-01-13 18:10:07
【问题描述】:

我尝试使用<iframe> 作为内容,并使用position: fixed; 作为音乐播放器播放栏,以将其保持在页面底部。

演示:http://jsfiddle.net/ThinkingStiff/vhLeE/

HTML:

<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>

CSS:

body {
    margin: 0;
    height: 100%; 
}

iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

#player {
    background-color: black;
    bottom: 0;
    color: white;
    left: 0;
    position: fixed;
    height: 30px;   
    width: 100%; 
}

遗憾的是,这不适用于 IE 或 Firefix 9,它只是在一个小的高度窗口中显示内容:http://cl.ly/0y0T2I1R042c3G002H3y

我该如何解决这个问题?

【问题讨论】:

    标签: iframe


    【解决方案1】:

    我以前曾在我从事的工作中看到过类似的问题,幸运的是,解决方法非常简单——IE 和 Firefox 只需要将 html 高度也设置为 100%。因此,将样式的第一个元素更新为:

    html, body {
        margin: 0;
        height: 100%; 
    }
    

    这应该可以解决问题。

    【讨论】:

      【解决方案2】:

      您还应该考虑将iframediv 高度除以百分比。如果为iframe 指定100%,div 可能会隐藏滚动条。

      你可以改成

      iframe {
          border: 0;
          display: block;
          height: 97%;
          width: 100%;
      }
      #player {
          background-color: black;
          bottom: 0;
          color: white;
          left: 0;
          position: fixed;
          height: 3%;   
          width: 100%;
      }
      

      http://jsfiddle.net/vhLeE/3/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-03
        • 2015-03-06
        • 2013-12-23
        • 2012-06-30
        相关资源
        最近更新 更多