Question

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

更新：我可以通过将标签内容留在页面外，然后将活动内容放回到左边：0来解决此问题，以便始终显示并且永远不会重新呈现。 **在意义上，这是小提琴，坚果：tab fiddle

Chrome屏幕截图 chrome works

IE8破解了屏幕截图 ie blows 您可能会注意到：没有边框，没有背景，也没有背景图像（小的彩色框）。

与标签内容相关的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 expected）

$('.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 {}

Answer 2

好的，经过长时间的尝试，我设法做到了。最后，我通过围绕tabContent_wrapper的角落来解决它。

以下是我作为简短摘要所做的事情：

从每个tabContent div中删除了roundedCorners，添加到tabContent_wrapper
将clearfix类添加到所有tabContent div，在CSS代码中定义clearfix类
将PIE.htc添加到roundedCorners
因为CSS3PIE角落而向roundedCorners添加了一些填充...
添加位置：相对; z-index:10;至roundedCorners
评论了tabContent的{{1}}
hid position:absolute;，因为有一个tabContent_wrapper填充，在显示没有内容时看起来很丑陋
删除了2px前面的评论标记，现在需要它;当我们再次点击活动标签时放入$('.tabContent_wrapper').show();（不要让丑陋的空内容显示边框）

以下是完整代码（使用http://jsbeautifier.org/格式化后）：

$('.tabContent_wrapper').hide();

一些截图：

默认情况下，没有打开标签：
第一个标签页打开：
第二个标签页打开：
第三个标签页打开：

当然，您必须操纵上边框，不要在活动标签下显示边框。
如果这有帮助，请告诉我。

使用cssPIE for IE8中的js选项卡内容无法渲染

2 个答案:

一些截图：