Question

我需要在我的网站上隐藏＆amp;显示一个包含pie.htc的圆角div，用于在IE中将其舍入。但是，当我使用display:none;和display:block;时，首次显示时它不会显示，但它无法正确显示。

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

你可以点击“显示容器”然后“隐藏容器”几次，它完美无缺，但是如果你点击“点击这里（只是警报链接）”，这只是与警报链接，然后点击“显示容器“它将显示没有背景的div的内容作为示例（这是在IE8中测试的）。

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

Answer 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切换回默认值，以及{{1}的任何元素} position不接受static，因此您无需更改

已更新

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

可以避免内容被访问，防弹方式是同时使用z-index和display: block，但根据上面已经提到的问题，我认为隐藏这个问题是个好主意。父{1}}本身而不是行为的visibility: hidden，这次我是通过添加和删除类来实现的

这似乎有效：

<li>

在CSS中添加了这个类（<a>不再需要任何额外的CSS）

$(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");                            
    });
});

这对你有用吗，我测试了FF中的CTRL + F并且它找不到隐藏的标签

注意我不认为此方法需要前3个定位和剪辑规则，我首先在#tab_container_3上尝试了它们并且没有完全裁剪效果IE - 所以我把课程移到了父母那里......但是我会留下规则来展示我的尝试 - 以防万一你想知道它们是什么;）

第三次幸运

这次我尝试了一个组合，首先用负z-index加载页面上的父.element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); visibility: hidden; display: none; }，设置一个延迟，以便0.5秒后它隐藏并纠正z-index，这里的理论我试图让PIE.htc在隐藏它们之前绘制角落，我想没有人会在0.5秒内搜索内容;） - 它在IE中并不完全流畅但我认为这是因为PIE.htc使用的效果的定位绘制角落和阴影，但现在效果确实画了，我试着向下滑动以显示div，因为它似乎“隐藏”IE浏览器最糟糕的揭示

Answer 2

我遇到了类似的问题。

这是背景：

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

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

解决方案：

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

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

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

Answer 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"); 
    }

只需向元素添加任何内联样式（即颜色为白色），这基本上会强制元素刷新。因此，所选标签会改变颜色。

单击链接href后，pie.htc称为Div notperly Redrawn

3 个答案:

已更新

第三次幸运

这是背景：

解决方案：