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

IE8 absolute/relative positioned element doesn't show up

本文关键字:元素 显示 定位 相对 绝对 IE8      更新时间:2023-09-26

我有一个列表(div)与inline-block css位置。里面有一个relative定位的ul是隐藏的。所以我试图通过添加一些类将这个div转换为absolute。通常,当我们点击列表时,列表就会显示出来。它可以在其他浏览器中工作,但IE8/9

我用谷歌搜索"ie绝对定位元素消失",并尝试了他们的解决方案,但没有运气。

您可以在这里进行测试: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中,列表保持在屏幕上。

小提琴:http://jsbin.com/anokod/1/edit

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

在IE中,当有两个属性filter:progid:DXImageTransform.Microsoft.gradient...应用于相同的定位元素时,它会导致这个错误。

移除样式为jAutochecklist_wrapper的height: 20px