Javascript 在IE8中使用cssPIE for js选项卡内容不呈现
我已经创建了一个选项卡和选项卡内容动画。单击选项卡时，相应的选项卡内容将显示在下方，其他选项卡内容则隐藏起来，非常简单且工作正常。我遇到的问题是在IE7和8中渲染边界半径。我将cssPIE.htc用于可能受这些css3属性影响的任何css。这适用于没有使用jQuery操作的页面上的静态内容，但对于动态内容（如选项卡），我相信内容的css需要-pie:n属性。这样做之后，仍然没有结果。下面是我的代码（CSS、HTML和jQuery）以及chrome和IE8之间差异的屏幕截图。任何帮助都会很好 更新：我可以通过将选项卡内容保留在页面之外，然后将活动选项卡内容放回左侧来解决此问题：0，这样它将始终显示，并且永远不会重新呈现**与此同时，这是小提琴，快去吧： Chrome屏幕截图 IE8断开的屏幕截图 正如您可能注意到的：没有边框，没有背景，没有背景图像（小彩色框） 附属于选项卡内容的CSSJavascript 在IE8中使用cssPIE for js选项卡内容不呈现,javascript,jquery,css,internet-explorer,css3pie,Javascript,Jquery,Css,Internet Explorer,Css3pie,我已经创建了一个选项卡和选项卡内容动画。单击选项卡时，相应的选项卡内容将显示在下方，其他选项卡内容则隐藏起来，非常简单且工作正常。我遇到的问题是在IE7和8中渲染边界半径。我将cssPIE.htc用于可能受这些css3属性影响的任何css。这适用于没有使用jQuery操作的页面上的静态内容，但对于动态内容（如选项卡），我相信内容的css需要-pie:n属性。这样做之后，仍然没有结果。下面是我的代码（CSS、HTML和jQuery）以及chrome和IE8之间差异的屏幕截图。任何帮助都会很好 更新
.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");
}
位置：相对.tabContent {}
好的，经过长时间的尝试，我终于做到了。最后，我解决了这个问题，取整了
tabContent\u wrappertabContent\u包装中clearfixtabContentclearfixPIE.htcroundedCorners圆角tabContent位置：绝对tabContent\u包装2px$（'.tabContent_wrapper'）.show（）前面的注释符号，现在需要它；放入$（'.tabContent_wrapper'）.hide（）再次单击活动选项卡时（不要让丑陋的空内容显示为边框）
标签。。。
.圆角{
填充：2px；
边界半径：7px；
-webkit边界半径：7px；
-moz边界半径：7px；
/*新事物*/
行为：url（PIE.htc）；
位置：相对位置；
z指数：10；
}
.tabHome_包装纸{
边缘底部：-1px；
}
.tab_包装{
位置：相对位置；
高度：25px；
左边距：-1px；
}
.tab_ul li{
显示：内联块；
右边填充：20px；
溢出：隐藏；
宽度：132px；
高度：25px；
}
李：第一个孩子{
-webkit边框左下半径：7px；
-moz边框半径左下角：7px；
边界半径：0 7px；
}
tabLnk先生{
位置：绝对位置；
背景图像：url（'http://i.imgur.com/PkR4W.png');
背景位置：-132px 1px；
背景重复：无重复；
宽度：132px；
高度：25px；
页边顶部：1px；
z指数：9999；
字体大小：15px；
文本对齐：居中；
线高：25px；
颜色：白色！重要；
文字装饰：无；
}
.borderTopLeftTabContent{
边界半径：7px 7px 7px 7px！重要；
}
.tabLnk.active{
宽度：130px；
背景位置：-1px 1px；
-webkit边框左下半径：0px！重要；
-moz边框半径左下角：0px！重要；
边框左下半径：0px！重要；
颜色：#833889！重要；
}
.tabLnk:悬停，.tabLnk:焦点{
文字装饰：无；
}
.tabLnk:访问了{
颜色：白色；
}
.隐藏的{
左：-99999像素；
}
.tabu包装{
/*新事物*/
宽度：945px；
页边顶部：1px；
左边距：-1px；
边框：1px实心#772981；
/*
边框顶部：0px；
*/
/*由于使用了2像素圆角填充，因此先隐藏它*/
显示：无；
}
.tabContent{
/*
位置：绝对位置；
*/
显示：无；
背景色：白色；
背景图像：url（'http://i.imgur.com/yyhGR.png');
背景重复：无重复；
背景位置：98%90%；
/*移动到tabContent_包装器，现在不需要此z索引*/
/*
左边框：1px实心#772981；
右边框：1px实心#772981；
边框底部：1px实心#772981；
宽度：945px；
页边顶部：1px；
左边距：-1px；
z指数：9999；
*/
-webkit边框左上半径：0；
-左上角的moz边界半径：0；
边框左上半径：0；
}
.tabContent\img{
浮动：左；
宽度：290px；
高度：155px；
填充：20px 20px 10px 15px；
}
.tabu内容描述{
填充：32px140px20px；
宽度：450px；
浮动：对；
字体大小：14px；
颜色：灰色；
}
.TABU内容描述p：第一个孩子{
垫底：10px；
}
.lblTabTxt{
颜色：白色；
左：3倍；
.roundCorners {}
.tabContent {}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Tabs...</title>
<style>
.roundedCorners {
padding:2px;
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* New stuffs */
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
.tabHome_wrapper {
margin-bottom:-1px;
}
.tab_wrapper {
position:relative;
height:25px;
margin-left:-1px;
}
.tab_wrapper ul li {
display:inline-block;
padding-right:20px;
overflow:hidden;
width:132px;
height:25px;
}
.tab_wrapper ul > li:first-child a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 0 0 0 7px;
}
.tabLnk {
position:absolute;
background-image:url('http://i.imgur.com/PkR4W.png');
background-position: -132px 1px;
background-repeat:no-repeat;
width:132px;
height:25px;
margin-top:1px;
z-index:9999;
font-size: 15px;
text-align: center;
line-height: 25px;
color: White !important;
text-decoration: none;
}
.borderTopLeftTabContent {
border-radius: 7px 7px 7px 7px !important;
}
.tabLnk.active {
width:130px;
background-position:-1px 1px;
-webkit-border-bottom-left-radius: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
border-bottom-left-radius: 0px !important;
color: #833889 !important;
}
.tabLnk:hover, .tabLnk:focus {
text-decoration: none;
}
.tabLnk:visited {
color: White;
}
.hideContent {
left:-99999px;
}
.tabContent_wrapper {
/* new stuffs */
width:945px;
margin-top:1px;
margin-left:-1px;
border:1px solid #772981;
/*
border-top:0px;
*/
/* hide it first because of the 2 pixel roundedCorner padding */
display:none;
}
.tabContent {
/*
position:absolute;
*/
display:none;
background-color:White;
background-image: url('http://i.imgur.com/yyhGR.png');
background-repeat: no-repeat;
background-position: 98% 90%;
/* moved to tabContent_wrapper, this z-index is not needed now */
/*
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;
}
.tabContent_img {
float: left;
width:290px;
height:155px;
padding: 20px 20px 10px 15px;
}
.tabContent_description {
padding: 32px 140px 20px 0px;
width:450px;
float:right;
font-size: 14px;
color: gray;
}
.tabContent_description p:first-child {
padding-bottom: 10px;
}
.lblTabTxt {
color: white;
padding-left: 3px;
top: 5px;
position: relative;
}
.lblTabTxt:hover {
text-decoration: none;
}
/* Pete... clearfix from Drupal */
/**
* Markup free clearing.
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var tabLnk = $('.tabLnk');
$('.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();
// hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
$('.tabContent_wrapper').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');
}
});
});
</script>
</head>
<body>
<div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
<div id="tabArea" class="tab_wrapper">
<ul>
<li> <a class="tabLnk" href="javascript: void(0)">
Administrators
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Teachers
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Technologists
</a>
</li>
</ul>
</div>
<div id="tabContentArea" class="tabContent_wrapper roundedCorners">
<div class="tabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
<p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
a ullamcorper nulla egestas.</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
<p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>