javascript - IE8 绝对/相对定位元素不显示

Question

我有一个带有 inline-block css 位置的列表(div)。里面有一个 relative 定位的 ul 是隐藏的。所以我试图通过添加一些类将这个 div 转换为 absolute 。通常，当我们单击列表时，列表就会显示出来。它适用于除 IE8/9 以外的其他浏览器。

我在谷歌上搜索“ie absolute positioned element disappears”并尝试了他们的解决方案，但没有成功。

这是您可以进行测试的地方:http://jautochecklist.googlecode.com/svn/doc/test_popup.html

您可以保存 (Ctrl+S) 页面并编辑脚本进行测试。

位置的转换从第 956 行开始(jAutochecklist.js)。 wrapper 是我要移动的元素

if (data.settings.absolutePosition){
            var offset = wrapper.offset();
            var dummy = $('<div></div>').attr('class', pluginName + '_dummy ' + pluginName + '_wrapper').width(wrapper.width()).height(wrapper.height());
            obj.after(dummy);
            //move the list so the absolute position can become effective
            wrapper.addClass(pluginName + '_absolute').appendTo('body').css({
                top: offset.top + 3,
                left: offset.left
            });
            elements.input.focus();
        }

此外，当我们在列表打开/聚焦时关闭弹出窗口时，在 IE 中，列表保留在屏幕上。

fiddle :http://jsbin.com/anokod/1/edit

Answer 1

我通过删除具有绝对位置的包装器上的 css 样式 filter 解决了这个问题。

在 IE 中，当有 2 个属性 filter:progid:DXImageTransform.Microsoft.gradient... 应用于同一个定位元素时，会导致此错误。