iframe 和 IE6 和 IE7 的问题导致额外的底部填充答案

【问题标题】：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 内文档中的空格引起的，包括<DOCTYPE> 和<HTML> 元素之间以及<HTML> 和<HEAD> 元素之间的空格。 p>

【讨论】：