0

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

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

4

5 回答 5

5

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

于 2009-03-23T21:30:06.980 回答
4

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

于 2009-03-23T21:31:23.000 回答
2

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

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

于 2009-03-24T13:44:55.733 回答
1

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

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

于 2009-03-23T22:10:55.743 回答
-1

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

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

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

在 firefox 中，只需选择 Tools Menu，然后单击 Ad-Ons，然后单击 Get Ad-Ons 并搜索 firebug。

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

我希望这有帮助。

于 2009-03-23T21:29:51.240 回答