0

我在使用 Firefox 时遇到问题。我对下拉控件(html'select')有一个不可见的列表控件。不介意为什么,但我会说覆盖层是作为另一个自定义控件的一部分出现的弹出窗口。

即使它是隐藏的,它也会阻止我单击底层下拉控件,从而使底层控件看起来被禁用。虽然它没有被禁用,因为我可以切换到它。我只是无法点击它。我知道这是导致问题的叠加层,因为我将底层控件移到了一边,它又可以工作了。

这是 Firefox 中的错误吗?这不像设置半透明值。它完全禁用了控件的渲染,所以我认为这样一个不可见的控件不应该拦截鼠标事件。在 Internet Explorer 中不会发生此行为。

也许我可以在 JavaScript 中设置一些其他 CSS 属性来切换其鼠标事件捕获能力及其可见性。

dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';

更新:我刚刚阅读了 CSS 可见性值“隐藏”的描述,内容为“元素不可见(但仍占用空间)”。所以我想我必须将它的高度设置为零以及设置它的可见性来解决这个问题。

4

3 回答 3

1

将您的上层控件的 z-index 更改为 -1。样式=“z-index:-1;” 这将把它放在所有东西的下面,允许直接访问下拉菜单。您可能必须动态更改 z-index 以在可见时将覆盖层重新置于顶部。

更多信息

于 2009-11-17T21:24:01.890 回答
0

我之前在 Firefox 中制作弹出框的方式是使用 CSS 属性。

z-index: 500;
display: block;

显示一个元素,并且

z-index: -10;
display: none;

隐藏它。

现在。我对 z-index 的值是极端的,但这正是我选择的。这对我有用,但我的应用专门针对 Firefox;aaaa 并且我正在使用您所说的要避免的显示属性。

如果您担心使用 display:block 或 display:hidden,我想也许您可以尝试使用定位或调整元素大小。

要么使弹出元素绝对定位并在不可见时将其移出屏幕,或者在不可见时尝试使其宽度为 0px,高度为 0px。如果我仍然有问题,这是我可能会探索的两件事。我不确定我是否会推荐这些作为最佳解决方案。

真正考虑您的弹出元素有多少实例将具有不同的显示值,我发现在我的案例中只使用两种类型,“无”和“块”。也许操纵显示属性对您来说就足够了。

希望这可以帮助。

于 2009-11-17T22:03:55.397 回答
0

你是如何隐藏元素的?如果我没记错的话,“可见性:隐藏”应该(正确地)按照您描述的方式工作,而“显示:无”将完全消除渲染。

如果这不是原因,您能否使用 Web Developer Toolbar 确认确实是导致问题的不可见控件而不是另一个不透明度设置为 0 的控件?

于 2009-11-17T21:28:08.563 回答