使用jQuery应用css会阻止显示下拉列表

所以我有一些标签,我想在IE中显示整个内容。 我环顾四周并发现了一些 修复 ,但我不想包含YUI,因为我已经在其他地方使用了jQuery,并且更愿意在页面上保留选择而不是用DIV替换它。

在我提出的代码中,FF3运行良好。 在Internet Explorer(6,7,8)中,第一次单击会闪烁下拉列表然后消失。 我已尝试使用focusmousedown代替代码中的click事件,但没有成功。

如果我在autoWidth中删除了element.css两个设置,则下拉按预期工作,没有宽度很好的奖励。 有谁知道什么会导致css的设置使IE中的下拉失败?

    var count = 0; autoWidth = function(e) { $element = $(e.target) $element.css("width","auto"); if($element.width() < $element.data("originalWidth")) { $element.css("width", $element.data("originalCSSWidth")); } } resetWidth = function(e) { $element = $(e.target) $element.css("width", $element.data("originalCSSWidth")); $("#counter").text(++count); } recordEvent = function(e) { $("#event").text($("#event").text() + " " + e.type); } dropDownIEWidthFix = function() { //if($.browser.msie) //{ $dropDown = $(this); $dropDown.data("originalWidth", $dropDown.width()); $dropDown.data("originalCSSWidth", $dropDown.css("width")); $dropDown.blur(recordEvent); $dropDown.blur(resetWidth); $dropDown.change(recordEvent); $dropDown.change(resetWidth); $dropDown.click(recordEvent); $dropDown.click(autoWidth); //} }; $(function() { $("select.officeItemList").each(dropDownIEWidthFix); }); function trackingSelectionChanged(select) { $("#event").text($("#event").text() + " inlineOnChange"); }    
erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf pencil ruler ink A4 paper A3 paper erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf executive janitor developer
pencil ruler ink A4 paper A3 paper erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf executive janitor developer
eee pencil ruler ink A4 paper A3 paper ffff executive janitor













AdjustWidth fired : times

看起来问题在于IE渲染下拉列表。 如果您更改上的css,则下拉菜单会重置(初始点击时闪烁)。

因此,使用mousedown事件而不是click修复前两个下拉列表,但由于第三个下拉列表上的额外重置(因为它已经足够大)打破了IE的本机更改事件(下拉值永远不会改变,无论什么你点击的选项)。

解决方案:在初始页面加载时 – 如果下拉列表已经足够大,请不要绑定事件。 我将宽度切换为自动,并测量 ,然后仅在下拉需要时绑定宽度变化事件,可以避免事件发生在其他下拉。

这是经过代码测试的IE 6,7,8。 FireFox开始正常工作,与Safari相同。 你可以看到一行评论IE6修复,这一行,删除后,导致IE6中的原始(不正确)行为。 说实话,我不确定为什么。

      
col1
col2
col3













AdjustWidth fired : times