我已经创建了一个选项卡和选项卡内容动画。单击选项卡时,相应的选项卡内容显示在下方,其他选项卡隐藏,非常简单且工作正常。我遇到的问题是 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');
}
});
最佳答案
尝试添加
position:relative
到
.roundCorners {}
听起来很有趣,但遇到了同样的问题,可能会有所帮助。
编辑:
同样适用于:
.tabContent {}
关于javascript - 将 cssPIE 用于 IE8 中的 js 选项卡内容未呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13770341/