Question

我正在尝试将Google Maps iframe插入我的网站。 iframe的填充量为4px，边界为1px已经应用于它，但由于某些原因，在IE6和IE7中，在iframe的底部添加了额外的3px填充。

您可以在此处查看我的测试网站：

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

有没有理由发生这种情况，如果有，是否有解决方法？

Answer 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问题。

问候。

的奥斯卡

Answer 2

尝试设置以下CSS并查看它是否有帮助：

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

.clear { 
    clear: both;
}

Answer 3

嗯，这可能是因为iframe中的元素.. 所以解决这个问题的最简单方法是在iframe中添加overflow：hidden，如：

<iframe style="overflow: hidden;">

或与css。我们可以说代码位于名为googlemap的div中：

#googlemap iframe{overflow: hidden;}

ie6和ie7有问题，所以我希望这会有所帮助..

Answer 4

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

处理这个怪癖的一个选择是有条件地将IE6和IE7的填充底部设置为1px而不是4px。

有点hacky但欢迎使用CSS和IE。

Answer 5

设置顶部/底部填充和固定高度，左/右填充和固定宽度时，您会遇到问题。如果你想保留你的代码，你会想要玩这样的东西。在style阻止后将其放在页面上：

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

Answer 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]-->

Answer 7

问题在于IFrame中的Google地图页面。我不知道在哪里，我害怕进入它...它可能有一个MB的CSS或者什么...在一条长线......

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

Answer 8

我通常用

开始我的CSS

{
margin: 0;
padding: 0;
border: 0;
}

（通用选择器）告诉浏览器默认情况下不添加边距/填充/边框，而是将其重置为“0”。这通常足以为跨浏览器问题节省很多麻烦。

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

iframe{
padding-bottom: 0;
}

Answer 9

这可能是由iframe内部文档中的空格，{strong>包括 <DOCTYPE>和<HTML>元素之间的空格以及<HTML>和{之间的空格引起的{1}}元素。

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

9 个答案: