Question

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

<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。谁知道为什么？

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

检查你的XHTML是否形成良好，听起来像一个悬空的DIV（萤火虫将帮助这个）。

另一方面，jquery有一些非常好的动画，可以让这个开关在眼睛上更好看。

Answer 5

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

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

使用firebug，您可以查看两个div之间可能有什么不同。

从firefox，只需选择工具菜单，然后点击广告，然后点击获取广告并搜索firebug。

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

我希望这会有所帮助。

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

5 个答案: