javascript - 将 cssPIE 用于 IE8 中的 js 选项卡内容未呈现

Question

我已经创建了一个选项卡和选项卡内容动画。单击选项卡时，相应的选项卡内容显示在下方，其他选项卡隐藏，非常简单且工作正常。我遇到的问题是 border-radius 在 IE7 和 8 中的呈现。我将 cssPIE.htc 用于可能受这些 css3 属性影响的任何 css。这适用于页面上未使用 jQuery 操作的静态内容，但适用于选项卡等动态内容，我相信内容的 css 需要 -pie-watch-ancestors: n 属性.这样做之后，仍然没有结果。下面是我的代码(CSS、HTML 和 jQuery)以及 chrome 和 IE8 之间区别的屏幕截图。任何帮助都会很棒。

更新:我可以通过将选项卡内容保留在页面之外来解决此问题，然后将事件内容放回左侧:0，以便它始终显示并且永远不会重新呈现。 **在此期间，这是 fiddle ，发疯:tab fiddle

Chrome 屏幕截图

IE8 损坏截图 您可能会注意到:没有边框、没有背景，也没有背景图像(小彩色框)。

与标签内容相关的 CSS

    .tabContent {
    position:absolute;
    display:none;
    background-color:White;
    background-image: url(/includes/images/home_phase2/colored_boxes_small.png);
    background-repeat: no-repeat;
    background-position: 98% 90%;
    border-left:1px solid #772981;
    border-right:1px solid #772981;
    border-bottom:1px solid #772981;
    width:945px;
    margin-top:1px;
    margin-left:-1px;
    z-index:9999;

    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    behavior: url("/includes/css/PIE.htc");
    -pie-watch-ancestors: true;
}

    .roundedCorners {
    border-radius:7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    behavior: url("/includes/css/PIE.htc");
}

jQuery(预期的 document.load)

$('.tabContent').click(function (event) {
    event.stopPropagation();
});

tabLnk.each(function () {
    $(this).attr("href", "javascript: void(0)")
});

tabLnk.click(function (event) {

    event.stopPropagation();
    var $this = $(this);
    var hideActive = $('.active').parent().index();

    if ($this.hasClass('active')) {
        $this.removeClass('active');
        $('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
    } else {
        $('.tabLnk').removeClass('active');
        $this.addClass('active');
        var showActive = $('.active').parent().index();
        $('.tabContent_wrapper').show();
        var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
        activeContent.show();
        activeContent.siblings().hide();
    }

    if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
        $('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
    }
});

Answer 1

尝试添加

position:relative

到

.roundCorners {}

听起来很有趣，但遇到了同样的问题，可能会有所帮助。

编辑:

同样适用于:

.tabContent {}