【问题标题】:Problem with iframe and IE6 and IE7 causing extra bottom paddingiframe 和 IE6 和 IE7 的问题导致额外的底部填充
【发布时间】:2013-10-22 22:02:58
【问题描述】:

我正在尝试将 Google 地图 iframe 插入我的网站。 iframe 有一个 4px 的内边距和一个 1px 的边框,但由于某些原因,在 IE6 和 IE7 中,iframe 的底部添加了一个额外的 3px 内边距。

您可以在这里查看我的测试站点:

http://www.prashantraju.com/test/

出现这种情况是否有原因,如果有,是否有解决办法?

【问题讨论】:

    标签: css iframe internet-explorer-6 internet-explorer-7


    【解决方案1】:

    有一种方法可以在不进行黑客攻击的情况下做到这一点,很简单,将 IFRAME 放在 DIV 中。

    例子:

    <div style="width:400px; height:150px;"><iframe 
           width="100%" height="100%"
           marginheight="0" marginwidth="0" frameborder="0" scrolling="no" 
           style="border: #4EAD18 3px solid"
           name="add" id="add" src="/chatbox/testb.html"></iframe></div>
    

    此修复 IE6 问题。

    问候。

    奥斯卡

    【讨论】:

      【解决方案2】:

      尝试设置以下 CSS 看看是否有帮助:

      iframe { 
          margin: 0;
          padding: 0;
          padding: 4px;
          border: 1px solid #d5d5d5;
      }
      
      .clear { 
          clear: both;
      } 
      

      【讨论】:

        【解决方案3】:

        嗯,这可能是因为 iframe 中的元素.. 所以解决这个问题的最简单方法是在 iframe 中添加溢出:隐藏,例如:

        <iframe style="overflow: hidden;">
        

        或使用 css。假设代码位于名为 googlemap 的 div 中:

        #googlemap iframe{overflow: hidden;}
        

        ie6和ie7有问题,希望对你有帮助..

        【讨论】:

          【解决方案4】:

          据我所知,这是 IE6 和 IE7 中的渲染问题。这两个浏览器在 CSS 方面都有一些有趣的怪癖,看起来你可能已经发现了一些。

          解决这个问题的一个方法是有条件地将 IE6 和 IE7 的 padding-bottom 设置为 1px 而不是 4px。

          有点老套,但欢迎使用 CSS 和 IE。

          【讨论】:

          • 哈,我们俩的想法一样。我知道采用这种方法感觉不对,但它的 IE6 和 IE7。那么,不管怎样都行得通?
          • @Doug 同意有时完成它的唯一方法将是某种黑客行为。根据我要排队的内容,我通常会忽略这样的事情。与我合作的客户不想为这种吹毛求疵的水平付费,感谢上帝。
          【解决方案5】:

          在设置顶部/底部内边距和固定高度,或左/右内边距和固定宽度时,您经常会遇到问题。如果你想保持你的代码不变,你会想要玩这样的东西。将其放在您的 style 块之后的页面上:

          <!--[if lte IE 7]>
          <style type="text/css" media="screen">
              iframe { padding-right: 2px; padding-bottom: 1px }
          </style>
          <![endif]-->
          

          【讨论】:

            【解决方案6】:

            IE 6 和 7 似乎将底部填充加倍。您可以通过将padding 增加到一个较大的数字并观察底部大小增长两倍来对此进行测试。如果您随后设置padding-bottom: 0,它将适合这些版本的 IE。

            我无法解释为什么会这样。我认为这可能是由于 Google 的 iframe 中有一系列嵌套的 iframe,但即使您专门使用基于 id 的 CSS 来处理您的框架,它仍然会发生。

            我会简单地为 IE6 和 IE7 应用设置padding-bottom: 0 的条件样式表。像这样的:

            <style type="text/css">
            iframe { padding: 4px ; border: 1px solid #d5d5d5; }
            .clear { clear: both; }
            </style>
            <!--[if lte IE 7]>
            <style type="text/css">
            iframe { padding-bottom: 0 }
            </style>
            <![endif]-->
            

            【讨论】:

              【解决方案7】:

              问题在于 IFrame 中的 Google 地图页面。我不知道在哪里,而且我害怕进入它......它可能有一个 MB 的 CSS 或其他东西......在一条长线上......

              如果您用自己的页面和彩色背景替换 google 页面,您会看到填充消失了。给谷歌页面一个彩色背景 没有显示它,所以它显然是除此之外的其他东西。可能是 javascript 代码中的错误或某种磁贴定位代码。 编辑:它确实显示了彩色背景,所以这只是证明它在那个页面中。

              【讨论】:

                【解决方案8】:

                我通常以

                开头我的 CSS
                {
                margin: 0;
                padding: 0;
                border: 0;
                }
                

                那个(通用选择器)告诉浏览器默认情况下不要添加边距/填充/边框,而是将其重置为“0”。 这通常足以省去很多跨浏览器问题的麻烦。

                但是对于这个你已经完成了一半,也许最好的办法是使用条件 cmets 添加一个 ie6 css 并在其上添加:

                iframe{
                padding-bottom: 0;
                }
                

                【讨论】:

                  【解决方案9】:

                  这可能是由 iframe 内文档中的空格引起的,包括&lt;DOCTYPE&gt;&lt;HTML&gt; 元素之间以及&lt;HTML&gt;&lt;HEAD&gt; 元素之间的空格。 p>

                  【讨论】:

                    猜你喜欢
                    • 2010-09-26
                    • 2010-10-20
                    • 2010-12-12
                    • 1970-01-01
                    • 2017-08-21
                    • 1970-01-01
                    • 2019-08-08
                    • 2011-02-14
                    • 2020-12-24
                    相关资源
                    最近更新 更多