在 IE8 中将 cssPIE 用于 js 选项卡内容不呈现
Posted
技术标签:
【中文标题】在 IE8 中将 cssPIE 用于 js 选项卡内容不呈现【英文标题】：Using cssPIE for js tab content in IE8 not rendering 【发布时间】：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”错误），请打开控制台和/或单击以在新选项卡中打开每个图像，然后然后回到他的小提琴，它应该可以正常工作 【参考方案1】：尝试添加
position: relative
到
.roundCorners
听起来很有趣，但遇到了同样的问题，可能会有所帮助。
编辑：
同样适用于：
.tabContent
【讨论】：
.roundCorners 在前端添加到许多具有 .tabContent 的元素，即 position:absolute。你是说 position:absolute 在我的标签内容上不起作用吗？ 我已经尝试过绝对位置，但运气不佳。另一方面，我知道相对位置有效。还是没有运气？ 仍然没有运气，我想我知道为什么。 cssPIE 应该适用于除静态之外的任何位置。我相信原因是因为我的 js 正在切换内容的显示，导致边框无法呈现。我可以通过让标签内容离开页面来解决这个问题，然后将活动的内容放回左侧：0，以便它始终显示并且永远不会重新渲染..【参考方案2】：好的，经过长时间的尝试，我设法做到了。最后我通过圆角tabContent_wrapper解决了它。
以下是我所做的简短总结：
-
从每个 tabContent div 中删除了圆角，添加到
tabContent_wrapper
将clearfix 类添加到所有tabContent div，在CSS 代码中定义clearfix 类
将PIE.htc 添加到roundedCorners
由于 CSS3PIE 角向roundedCorners 添加了一些填充...
添加位置：相对； z-index:10; 到 roundedCorners
注释掉了tabContent的position:absolute;
隐藏tabContent_wrapper，因为有一个2px 填充，当其中不显示任何内容时看起来很难看
删除了$('.tabContent_wrapper').show();前面的评论标志，现在需要；当我们再次点击活动选项卡时输入$('.tabContent_wrapper').hide();（不要让丑陋的空内容显示有边框）
这是完整的代码（使用http://jsbeautifier.org/ 格式化后）：
<!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"
>
</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"
>
</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"
>
</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>
部分截图：
-
默认情况下，不打开任何选项卡：
第一个标签打开：
第二个标签打开：
第三个标签打开：
当然，您必须控制上边框，以免在活动标签下显示边框。 让我知道这是否有帮助。
【讨论】：
非常详细的答案，这是我的第二个选择，但我可能会包含一些 css 更改。我将选项卡内容定位在页面之外，以便在单击时不会重新呈现选项卡内容。我也可以替代选项卡内容包装器。感谢您的帮助以上是关于在 IE8 中将 cssPIE 用于 js 选项卡内容不呈现的主要内容，如果未能解决你的问题，请参考以下文章
我们如何在反应原生版本 .61 中将动画添加到底部选项卡图标
是否可以使用Javascript在IE8中生成虚拟keyboardEvent（选项卡）