【发布时间】：2012-11-26 01:25:47
【问题描述】：
我创建了一个选项卡和选项卡内容动画。单击选项卡时，相应的选项卡内容会显示在下方，而其他选项卡则隐藏，非常简单且工作正常。我遇到的问题是 IE7 和 8 中的 border-radius 渲染。我将 cssPIE.htc 用于可能受这些 css3 属性影响的任何 css。这适用于页面上未使用 jQuery 操作的静态内容，但对于诸如选项卡之类的动态内容，我相信内容的 css 需要 -pie-watch-ancestors: n 属性.这样做之后，仍然没有结果。下面是我的代码（CSS、HTML 和 jQuery）以及 chrome 和 IE8 之间区别的屏幕截图。任何帮助都会很棒。
更新：我可以通过让选项卡内容离开页面，然后将活动选项卡内容放回左侧：0 来解决此问题，以便它始终显示并且永远不会重新呈现。 **与此同时，这里是小提琴，发疯：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');
}
});
【问题讨论】：
-
你能把示例代码粘贴到jsfiddle.net 或jsbin.com 上吗？这对我们调试有很大帮助。谢谢。
-
确定@Sk8erPeter，让我设置一下
-
你的小提琴似乎不起作用......
-
让我到处钓鱼，看看我能为你做什么，kniebel先生
-
对于任何难以查看他的小提琴内容的人（如果您收到“403 Forbidden”错误），请打开控制台和/或单击以在新选项卡中打开每个图像，然后然后回到他的小提琴，它应该可以正常工作
标签： javascript jquery css internet-explorer css3pie