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

Posted 2023-02-22

【中文标题】单击链接 href 后，pie.htc 样式的 Div 未正确重绘

【英文标题】：After Clicking link href, pie.htc styled Div not Properly Redrawn

【发布时间】：2011-07-23 11:45:51

【问题描述】：

我需要在我的网站中隐藏和显示包含 pie.htc 的圆角 div，以便在 IE 中对其进行舍入。但是当我使用display:none; 和display:block; 时，最初它在第一次显示时没有正确显示。

我使用visibility 而不是display 覆盖了这个小问题，但其他问题出现在显示和可见性中。如果我单击任何带有 href 的链接，然后单击以显示/隐藏带有圆角的 div，它将在没有样式的情况下显示

This is a live example

你可以点击“Show Container”然后“Hide Container”几次，效果很好，但是如果你点击“Click Here（Just Alert Link）”，它只是与alert的链接，然后点击“Show Container " 以显示不带背景的 div 内容为例（在 IE8 中测试过）。

Another Example Starting From The Tab Demo on the CSS3 Pie Site

【参考方案1】：

它似乎与 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>

并将此 CSS 更改为：

#tab_container_3
   position: relative;
   top: -9999px;

这只是将其移开，通过使用 jQuery 将 position 更改为 static 您将 a 切换回其默认值，并且任何带有 position 或 static 的元素都不会接受z-index，所以你不需要改变它

更新

根据可访问性（或不可访问性）信息

可以避免内容被访问，防弹的方法是一起使用display: block 和visibility: hidden，但是根据上面已经提到的问题，我认为隐藏父级<li> 是个好主意本身而不是 <a> 的行为，这次我通过添加和删除一个类来做到这一点

这似乎有效：

$(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 中添加了此类（#tab_container_3 不再需要任何额外的 CSS）

.element-invisible 
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  visibility: hidden;
  display: none;

这对你有用吗，我在 FF 中测试了 CTRL+F 并没有找到隐藏的选项卡

注意我认为这种方法不需要前3个定位和剪辑规则，我先在a上尝试了它们，并且在IE中没有完全裁剪效果 -所以我把课程搬到了父 li.. 但我会留下规则来展示我尝试过的内容 - 以防你想知道它们是什么;)

第三次幸运

这次我尝试了一个组合，首先将父 li 加载到带有负 z-index 的页面之外，设置延迟以便 0.5 秒后它隐藏并更正 z-index，这里的理论是尝试为了让 PIE.htc 在隐藏角落之前画出角落，我想没有人会在 0.5 秒内搜索内容；) - 在 IE 中并不完全流畅，但我认为这是因为 PIE.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);                            
    );
);

【讨论】：

这可行，但我不想仍然显示它我想隐藏它，例如我有很长的文章，所以用户可以通过“Ctrl+F”在浏览器中搜索，如果他在单击警报后隐藏的 div 和其他内容中的单词，鼠标悬停样式和颜色不再更改编辑示例：linkthansk。

好的，我明白了，谢谢，我已经更新了删除li 的答案，但它现在似乎对我有用，并且无法通过标签找到

感谢 clairesuzy，确实不再是搜索但仍然第一次显示选项卡，它将在 IE6 和 IE8 中首次显示没有背景和任何样式，直到鼠标悬停将修复它和其他问题它显示的选项卡然后将隐藏在文档准备好&我不能把 li 最初的 thst 类或我们将得到相同的初始错误，我更新此链接的更改：link再次感谢

lol.. 尝试了这么多不同的事情忘了回去检查原来的问题.. 帖子中有更多男女同校，尝试结合 z-index 和显示切换（有延迟所以它最终会被正确隐藏）

好的，非常感谢 clairesuzy 终于成功了 last version 再次感谢

【参考方案2】：

我也遇到过类似的问题。

这是背景：

我们在页面上的两个按钮之间切换，当一个隐藏时，另一个显示。 当一个被点击时，它被隐藏而另一个被显示。

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

解决方案：

我们正在使用 jquery 的切换来显示/隐藏，但我确信它可以与其他转换一起使用。 el 是正在显示的元素。

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

调整大小只是导致元素刷新，然后正确绘制！

【参考方案3】：

当使用 IE7 或 IE8 查看时，我的页面具有由 css3pie 创建的圆角选项卡。然后 jquery 将当前类添加到选定的选项卡，这使选项卡改变颜色或突出显示。但是，颜色在页面加载时不会改变。只有将鼠标悬停在选项卡上后，它才会显示颜色变化。类和样式从一开始就存在，但不知何故它不会刷新或更新颜色，这是一个背景图像。这可能是由于 css3pie 在 jquery 添加新类之前运行。一旦添加了 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"); 
    

只需将任何内联样式（即白色）添加到元素，这基本上会强制元素刷新。因此选定的选项卡会改变颜色。