jQuery UI按钮赢得'；不要躲在IE7里

嗯

我制作了一个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>

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

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

这在所有经过测试的浏览器（FF、chrome、IE8）中都非常有效，但在IE7中则不然。在那里，当我通过必要的隐藏和滑动切换将#drawer的内容从“filter”更改为“order”时，会出现applyFilter按钮的空幻影。当你在它上面盘旋时会消失的鬼魂

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

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

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

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

---

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

您已经了解了为什么部分，这里讨论了这一部分：

我还认为“为什么”的部分原因是IE7的非标准CSS实现/解释（又名bug）

我相信这里概述了修复方法：

及

---

这相当复杂。你能做一个真正的演示吗？不幸的是，这是一个安全的私人应用程序，我不能给你访问。稍后我会考虑制作一个纯演示页面，但我现在正忙着处理另一个问题。我会将页边距或文本缩进设置为-9999px。IIRC函数是$（'.things'）.css（'text-indent:-9999px；'）；使用jsbin.com制作交互式示例谢谢这个技巧，我一有时间就会尝试一下。我不再有这个问题了，因为网站的那部分已经被弃用了。然而，你刚才给我的信息很可能已经解决了这个问题，而过滤问题对我来说是非常有价值的信息。非常感谢您回答这个问题，这个问题已经开放了很长时间。

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

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