【问题标题】:How to prevent image in iframe scrolling on IE 11?如何防止 IE 11 上 iframe 中的图像滚动?
【发布时间】:2019-09-29 03:18:51
【问题描述】:

我的测试站点在这里:http://acjs.4fan.cz/test/index.html

它包含 4 张相同的 140 x 140 像素的图像。 img 标签用于顶行,140 x 140 像素的 iframe 标签用于底行。我不会问为什么不同浏览器的 iframe 图像显示不同:-)

我想知道如何防止 iframe 中的图像在 IE 11 上滚动,如以下视频所示:https://www.youtube.com/watch?v=jS6FiY8dpUA?

【问题讨论】:

    标签: html internet-explorer iframe


    【解决方案1】:

    我认为最好的方法是使用 CSS 将内容设置为 100% 的内部以及 HTML 中 iframe 所需的内容

    #content{
     width:100%;
    height:100%; 
    }
    

    【讨论】:

      【解决方案2】:

      您可以让图像完全填满 iframe,以防止它在 IE11 上滚动。获取 iframe <body> 并将 body 的样式设置为 margin:0px;padding:0px 以使其完全填充。以下是相关代码:

          <script>
                  function a() {
                      var iframe = document.getElementById('iframe1');
                      var b = iframe.contentWindow.document.body;
                      b.style.cssText = "margin:0px;padding:0px"; 
                  }
          </script>
      
          <body onload="a()">
              <iframe width="140" height="140" src="image.jpg" frameborder="1" scrolling="no" id="iframe1">
              </iframe>
              <iframe width="140" height="140" src="c1.html" frameborder="1" scrolling="no" id="iframe2">
              </iframe>
          </body>
      

      【讨论】:

      • 谢谢周宇——它成功了。但是,现在我想将图像加载为 src="c1.html",并且 c1.html 包含该加载的图像 - 如下所示:acjs.4fan.cz/test-2/index-2.html。你能摆脱 IE 11 上的垂直滚动吗?
      • 我在上面编辑了我的答案。你应该给 src="c1.html" 的 iframe 一个 id="iframe2",而不是 id="iframe1"。
      • 感谢周宇的新版本。虽然它适用于 src="image.jpg" 很好,但由于某种原因它仍然不适用于 src="c1.html",请参阅此视频:youtu.be/GdWi62MyVH0。知道如何在 IE 11 上修复它吗?
      • ondragstart="return false;" 放到c1.html的&lt;body&gt;中。它禁用 iframe 中的滚动。
      猜你喜欢
      • 2013-04-24
      • 1970-01-01
      • 1970-01-01
      • 2014-12-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-12-04
      相关资源
      最近更新 更多