Jquery 单击链接href后，pie.htc样式的Div未正确重画

我需要在我的网站中隐藏并显示一个圆角div，其中包含pie.htc，以便在IE中对其进行圆角。但是当我使用

display:none和
显示：块首次显示时最初未显示的位置未正确显示

我通过使用
可见性
而不是
显示
重写了这个小问题，但是在显示和可见性中都会出现其他问题。如果我使用href单击任何链接，然后单击以显示/隐藏带有圆角的div，则将显示该div而不显示样式


你可以点击“显示容器”然后点击“隐藏容器”几次，它工作得很好，但是如果你点击“点击这里（只是警报链接）”，这只是警报链接，然后点击“显示容器”，它将显示没有背景的div的内容作为一个例子（这是在IE8中测试的）

这似乎与PIE.htc和重画有更多的关系，所以不让浏览器重画如何？只需将div移到一边，然后再移回来

<script type="text/javascript">
$(document).ready (function () {
    $('#show_div').bind ('click', function () {
            // show it by returning it to it's default position
        $('#tab_container_3').css ( {position : 'static'} );
    });
    $('#hide_div').bind ('click', function () {
            // hide it again by making it read the z-index
        $('#tab_container_3').css ( {position: 'relative'} );                       
    });
});
</script>

这只是将其移开，通过jQuery将
位置
更改为
静态
，您可以将
a
切换回其默认值，并且
位置
为
静态
的任何元素都不接受
z索引
，因此您不需要更改它

更新
根据可访问性（或非可访问性）信息

好的，为了避免内容被访问，防弹的方法是同时使用
display:block
和
visibility:hidden
，但是根据上面已经注意到的问题，我认为最好隐藏父
本身，而不是行为的
，这次我通过添加和删除一个类来实现

这似乎有效：

$(document).ready (function () {

    // to make tab hidden and inaccessible onload
    $('#tab_container_3').parent().addClass("element-invisible");
    
    $('#show_div').bind ('click', function () {
        $('#tab_container_3').parent().removeClass ("element-invisible");       
    });
    $('#hide_div').bind ('click', function () {
          $('#tab_container_3').parent().addClass ("element-invisible");                            
    });
});

将该类添加到CSS中（
#选项卡_容器_3
不再需要任何额外的CSS）

现在，我在FF中测试了CTRL+F，但没有找到隐藏的选项卡

注意我不认为前3个定位和剪裁规则对于这种方法是必要的，我首先在
a
上尝试了它们，但没有在IE中完全裁剪效果-因此我将类移动到父类li。。但我会留下规则来展示我的尝试——以防万一你想知道它们是什么；）

第三次幸运
这次我尝试了一种组合，首先用负z索引加载页面上的父级
li
，设置一个延迟，以便0.5秒后隐藏并更正z索引，这里的理论是试图制作馅饼。htc在隐藏它们之前绘制角点，我想没有人会在0.5秒内搜索内容；）-它在IE中不是完全平滑的，但我认为这是因为效果饼的位置。htc用来画角和阴影，但效果现在确实画出来了，我尝试向下滑动以显示div，因为这似乎“隐藏”了IE锯齿状显示中最糟糕的部分

$(document).ready (function () {

    // to make tab hidden but accessible onload, accessible at first to allow link to draw, then hide it after 0.5 seconds  
    $('#tab_container_3').parent().css('top','-9999px').delay(500).hide('fast', function() {$(this).css({'top' : '0px'});});
                          
    $('#show_div').bind ('click', function () {
        $('#tab_container_3').parent().slideDown(200);       
    });
    $('#hide_div').bind ('click', function () {
          $('#tab_container_3').parent().hide(100);                            
    });
});

我也有类似的问题

背景如下：
我们在一个页面上的两个按钮之间切换，一个按钮隐藏，另一个按钮显示。
单击其中一个按钮时，它将隐藏，而另一个按钮将显示

用户第一次单击按钮时，它会隐藏ok，但另一个按钮会显示得非常奇怪（背景显示在左侧，但文本位置正确）。这只会在第一次发生，以后每次单击/转换都可以正常工作

解决方案：
我们正在使用jquery的切换来显示/隐藏，但我相信它可以用于其他转换。
el
是正在显示的元素

调整大小只会导致元素刷新，然后正确绘制
 使用IE7或IE8查看我的页面时，css3pie会创建带有圆角的选项卡。然后jquery将当前类添加到所选选项卡中，从而使选项卡更改颜色或高亮显示。但是，页面加载时颜色不会改变。只有将鼠标悬停在选项卡上后，才会显示颜色更改。类和样式从一开始就存在，但不知何故它不会刷新或更新颜色，这是一个背景图像。这可能是因为在jquery添加新类之前运行了css3pie。一旦添加了jquery类，css3pie就会忘记渲染更改或更新背景图像。不知何故，我需要刷新元素以使类更改生效

这个解决方案对我有效

    //check if the current URL matches the href path of the tab
    if (strURL == baseHrefPath) {
        //remove any previously highlighted tabs
        $(".tabs li.current a").removeClass("current");
        //highlight the matching tab (li)
        $(this).parent().addClass("current");

        //this is a hack for IE7 and IE8 which use css3pie for rounded corners
        //issue: the jquery adds the class after the css3pie runs, thus the change is not displayed
        //the selected tab is not changing color properly in IE7 and IE8
        //solution: add any inline style (i.e. color white) to the element
        //this basically forces the element to refresh so the new styles take effect
        //thus highlighting the current tab
        $(".tabs li.current a").css("color","white"); 
    }

只需向元素添加任何内联样式（即白色），这基本上会强制元素刷新。因此，所选选项卡会改变颜色。
这可以工作，但我不想继续显示它，我想隐藏它，例如，我有一篇很长的文章，用户可以通过“Ctrl+F”在浏览器中搜索，如果他在隐藏的div中搜索一个词，或者在单击警报后搜索其他内容，在鼠标上方，样式和颜色不再改变编辑的示例：Thansk.OK，我看到了，谢谢，我更新了答案，删除了
li
，但它现在似乎对我有效，而且无法通过选项卡找到谢谢clairesuzy，这是真的不再搜索，但仍在第一时间显示选项卡，它将在没有背景的情况下显示&在IE6和IE8中首次显示任何样式，直到鼠标悬停将修复它和显示它的其他问题。然后选项卡将隐藏在文档准备就绪上&我无法将其放入li初始类，否则我们将得到相同的初始错误，我将更新对此链接的更改：再次感谢。。尝试了这么多不同的事情却忘记了回去检查原始问题。。这篇文章中有更多的女同学，尝试z-index和display切换的组合（有一个延迟，这样它最终会被正确隐藏）好的，非常感谢clairesuzy终于可以工作了再次感谢
$(document).ready (function () {

    // to make tab hidden but accessible onload, accessible at first to allow link to draw, then hide it after 0.5 seconds  
    $('#tab_container_3').parent().css('top','-9999px').delay(500).hide('fast', function() {$(this).css({'top' : '0px'});});
                          
    $('#show_div').bind ('click', function () {
        $('#tab_container_3').parent().slideDown(200);       
    });
    $('#hide_div').bind ('click', function () {
          $('#tab_container_3').parent().hide(100);                            
    });
});

$(el).toggle(0, function() {       
                     if ($.browser.msie) {
                         $(this).each(function() { $(this).resize(); }); 
                     }
                });

    //check if the current URL matches the href path of the tab
    if (strURL == baseHrefPath) {
        //remove any previously highlighted tabs
        $(".tabs li.current a").removeClass("current");
        //highlight the matching tab (li)
        $(this).parent().addClass("current");

        //this is a hack for IE7 and IE8 which use css3pie for rounded corners
        //issue: the jquery adds the class after the css3pie runs, thus the change is not displayed
        //the selected tab is not changing color properly in IE7 and IE8
        //solution: add any inline style (i.e. color white) to the element
        //this basically forces the element to refresh so the new styles take effect
        //thus highlighting the current tab
        $(".tabs li.current a").css("color","white"); 
    }