隐藏/显示 div 时 Firefox 页面“移动”答案

【问题标题】：Firefox page "moves" when hiding/showing divs隐藏/显示 div 时 Firefox 页面“移动”
【发布时间】：2010-10-15 02:06:47
【问题描述】：

我们有一个具有这种一般结构的网页：

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

使用这个 CSS：

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

我们在页面上有一个链接，可让用户在使用“基本”搜索和“高级”搜索之间切换。切换链接调用此 Javascript：

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
    advanced.style.display = '';
    basic.style.display = 'none';
} else {
    basic.style.display = '';
    advanced.style.display = 'none';
}

这一切都在 IE 中运行良好。

它也可以在 Firefox 中使用 - 除了 - 当我们从一个 div 切换（即：显示/隐藏）到另一个 div 时，页面在 Firefox 中“移动”。当您来回切换时，“容器”中的所有文本都会向左/向右移动大约 5px。有人知道为什么吗？

【问题讨论】：

将 #container 边距设置为 'auto' 以外的值时会发生什么？

标签： javascript firefox html show-hide

【解决方案1】：

我不知道为什么，但是如果您安装 Firebug 一个 Firefox 插件，您可以使用它来调试您的问题。

在 CSS 以及显示和隐藏 div 方面，Firebug 节省了我数小时的调试时间。

使用 firebug，您可以查看两个 div 之间可能存在的差异。

在 firefox 中，只需选择工具菜单，然后点击 Ad-Ons，然后点击 Get Ad-Ons 并搜索 firebug。

您可以尝试的一件事是在显示之前隐藏，这可能会减少闪烁。如果您导致页面变高，这可能是问题的根源。

我希望这会有所帮助。

【讨论】：

这个问题是关于一个特定问题而不是一般如何调试。
无关紧要，提供问题的解决方案而不仅仅是通用工具集。

【解决方案2】：

是否导致滚动条出现/消失？

【讨论】：

啊，是的。我看到如果我过滤我的数据以使滚动条不会出现/消失，那么这个问题就会消失。是否有一些设置可以告诉 Firefox“不要担心滚动条状态”？
我把它放在身体里，它有点工作。虽然它解决了这个问题 - 在 IE 中，屏幕显示有点像有两个垂直滚动条，而在 FF 中，当我显示 div 时，现在出现一个水平滚动条。

【解决方案3】：

切换内容可以使页面内容更高。检查这是否会出现滚动条，因为这会稍微影响页面宽度。

【讨论】：

是的，它使滚动条出现/消失。如何处理出现/消失的滚动条以使页面内容不会“移动”？
一个肮脏的技巧是html{ height:100%; padding-bottom:1px }，它强制页面比它需要的高1px。

【解决方案4】：

检查您的 XHTML 格式是否正确，听起来像一个悬空的 DIV（萤火虫会对此有所帮助）。

在旁注 jquery 有一些非常好的动画，使这个开关在眼睛上更好看。

【讨论】：

【解决方案5】：

我最终做的是：HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }

这是一个很好的相关SO 帖子。

【讨论】：