javascript - 隐藏/显示 div 时的 Firefox 页面 "moves"

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 中“移动”。当您来回切换时，“容器”中的所有文本都会向左/右移动约 5 像素。有谁知道为什么吗？

Answer 1

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