Firefox 和 Webkit 的俄罗斯木偶显示问题：与 IE 兼容答案

【问题标题】：Russian puppets displayproblem with Firefox and Webkit: works well with IEFirefox 和 Webkit 的俄罗斯木偶显示问题：与 IE 兼容
【发布时间】：2012-08-01 20:53:29
【问题描述】：

我有一个教学网页，其中在特定部分 (DIV) 中，一系列问题必须一个接一个地出现。用户回答 Q1 后，Q2 会显示在下方，依此类推。

结构如下：

Mother_DIV 包含：带有问题的文本和一个 Button1

DIV2 as display=none 其中包含：回答上面的问题 + 文字和一个 Button2

DIV3  as display=none which contains: 
Answer to question above + text and a Button3

如果需要，依此类推。

有一个js的show(element)函数可以将任意元素的显示样式改为“内联” 每个按钮都必须将下面的 DIV 的显示更改为内联。

按钮 1 有：onclick=show('DIV2') 现在当 DIV2 可见时，Button2 也可见

按钮 2 有：onclick=show('DIV3') 现在，当 DIV3 可见时，Button3 也可见...

该脚本在 IE9 上就像一个魅力。

在 Firefox 或 Webkit 浏览器上，事情变得很忙！

Button1 正常工作并显示 DIV2，但随后 Button2 未被识别为按钮！单击无效，鼠标悬停不会将指针变为手形。

为了修复它，我改变了结构：

Mother_DIV 包含： Button1 和 Button2 和 Button3 等。加上一些文字

DIV2 as display=none 其中包含：文字

DIV3  as display=none which contains: 
text

猜猜看：所有按钮现在都在工作，每个连续的 DIV 都与其文本块一起显示！

唯一的问题是这个 UI 是不可接受的，因为当文本太长并且用户向下滚动时，按钮不再出现在页面的可见部分。

有人知道如何处理和挽救我的一天吗？

【问题讨论】：

一些代码和实际的html结构怎么样？或者一个实际问题（jsfiddle.net）的例子。

标签： javascript firefox button webkit

【解决方案1】：

在您的 Javascript 显示函数中，尝试将显示样式设置为 'block' 或 ''。（'block' 是 DIV 标签的默认值，'' 将其设置为默认值。）

【讨论】：

【解决方案2】：

找到它！你知道吗？这是一种奇怪的行为，也许答案对您有用：

我有一个 DIV 高度=500px。该 DIV 包含 2 个子 DIV：第一个是 490px 高度 top=0。第二个是 height=240px AND top=250px（大约是主 DIV 的下半部分）。

除非需要，否则第二个子 DIV 具有 display=none。因此它是不可见的。

用 IE 没问题。对于其他浏览器，不可见意味着仅对您的眼睛不可见，但对鼠标指针不可见。

然后，当一个按钮位于主 DIV 的下半部分后面时，它就会变为非活动状态。

请不要投票

【讨论】：