jQuery UI 按钮在 IE7 中不会保持隐藏状态

Question

好的，

我制作了一个 Twitter 风格的控制面板来应用过滤器并对列表进行排序， 它的代码是这样的：

<div id="drawer">
    <div id="orderDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>sorteer</h4>                    

    <div id="orderPanel">    
     <!--some content-->
    </div>
    </div>
    <div id="filterDrawer" class="subDrawer" >
    <div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
    <h4>Filters</h4>                    

    <div id="filterPanel">
    <!-- some content -->
    </div>
    <div id="filterButtonBar" class="drawerButtons">
    <button id='applyFilter' name='applyFilter'>Apply</button>
    </div>
    </div>
</div>

这与以下 JS 代码一起工作：

        $("#orderPanelButton").click( function(){
            if( $(".subDrawer[id!=orderDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#orderDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#orderDrawer").show();
                $("#drawer").slideToggle();
            }
        });


        $("#filterPanelButton").click( function(){
            if( $(".subDrawer[id!=filterDrawer]").is(":visible") ) {
                $("#drawer").slideUp( function() {
                    $(".subDrawer").hide();
                    $("#filterDrawer").show();
                    $("#drawer").slideDown();   
                });
            } else {
                $(".subDrawer").hide();
                $("#filterDrawer").show();
                $("#drawer").slideToggle();
            }
        });

最后我使用 jQuery UI 按钮来塑造按钮：

$("#applyFilter").click(function(){
                    $("#filterForm").submit();
                 });
$("[name='applyFilter']").button({icons: {
            primary:'ui-icon-arrowreturnthick-1-e'}});

这在所有测试的浏览器（FF、chrome、IE8）中都效果很好，但在 IE7 中则不然。在那里，当我使用必要的隐藏和 sliderToggles 将 #drawer 的内容从“过滤器”更改为“顺序”时，会出现 applyFilter 按钮的空幽灵。当你将鼠标悬停在它上面时，它就会消失。

这里有人知道为什么会发生这种情况以及如何摆脱 IE7 代码中这个恼人的小错误吗？

[2010 年 7 月 22 日更新] 我找到了一个临时解决方案，但希望找到更简洁的东西。 我添加了以下 JS，基于 PHP 的 MSIE 7.0 检测：

$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
   $(this).css("display","none");
});

$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
    $(this).css("display","");
});

其中 $drawer = subDrawer ID 的第一部分（过滤器/订单）。

Answer 1

您已经稍微了解了原因部分，这里将对此进行讨论：
为什么 jQuery 显示/隐藏使用 display:none 而不是可见性：隐藏？

我还认为部分“原因”是由于 IE7 非标准 CSS 实现/解释（又名错误）。

我相信这里概述了修复方法：
使用 jQuery 时 Internet Explorer 7 中的淡入淡出问题

http://jquery-howto。 blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html