3

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

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

这是一个活生生的例子

你可以点击“Show Container”然后“Hide Container”几次，它工作得很好，但是如果你点击“Click Here (Just Alert Link)”，它只是与警报的链接，然后点击“Show Container”它会以显示没有背景的 div 的内容为例（这是在 IE8 中测试的）。

从 CSS3 Pie 网站上的 Tab Demo 开始的另一个示例

4

3 回答 3

3

似乎它与 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更改positionto你切换回它的默认值，并且任何带有 a的元素都不接受 a ，所以你不需要改变它staticapositionstaticz-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);                            
    });
});
于 2011-03-26T14:49:20.523 回答
1

我有一个类似的问题。

这是背景：

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

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

解决方案：

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

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

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

于 2011-06-03T15:01:18.597 回答
1

当使用 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"); 
    }

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

于 2012-09-16T03:11:19.253 回答