【发布时间】：2012-12-05 16:26:36
【问题描述】：
所以这个 jquery 手风琴不能在 IE 8 中运行，但在 Firefox、Chrome 和 Safari 中运行良好。什么给了？
这是小提琴， http://jsfiddle.net/jEeqQ/
这里是脚本链接和代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( ".blurb, .contributors" ).accordion({
activate: function( event, ui ) {}
});
</script>
<script>$(document).ready(function($) {
$( ".blurb, .contributors" ).on( "accordionactivate", function( event, ui ) {
event.preventDefault();
$('html,body').animate({scrollTop:$(".ui-accordion-content").offset().top}, 500);
});
});
</script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( ".blurb" ).accordion({
collapsible: true,
heightStyle: "content",
active:false
});
});
</script>
HTML：
<div class="blurb">
<h3></h3>
<div>
<div class="text_center full left padding">
<h1 class="uppercase">#fridayfacts</h1>
<h6>Join us on twitter every friday</h6><br>
<h6 class="text_center"><a class="button" href="https://twitter.com/rcumsu" target="_blank">@rcumsu</a></h6>
</div>
<div class="text_left full right">
<h6>Fact:</h6>
<div class="text_left padding half left">
<p>The US needs 34% more students in STEM to keep up w/ economic demand. CTE helps meet that need.</p>
<p>Too many MS students drop out, often because they don't see real-world value of a degree. With CTE, they connect learning to work.</p>
<p>13K people with 4-yr degrees have re-entered MS community colleges to gain job skills. CTE prepares them for a profession.</p>
<p>20M+ in the US are un/underemployed, yet 3.4M jobs are unfilled due to skills gaps. CTE gives students the skills they need to find work.</p>
</div>
<div class="text_left padding half right">
<p>Employers value real-world, hands-on job experience. With CTE, MS students gain this experience early and qualify for more jobs.</p>
<p>STEM ed is crucial to US competitiveness in technology. CTE helps get kids in those fields faster. </p>
<p>By 2018, the US will need 22 million associate or higher degrees to fuel the economy. With CTE, MS students will be ready.</p><br><br><br>
</div>
</div>
</div>
</div>
CSS：
.blurb, .contributors {
/*
display: block;
float: left;
height: 0;*/
position:absolute;
bottom:0;
width: 100%;
}
.flex-viewport .blurb {
bottom:-15px;
}
.blurb_padding {
padding-bottom:50px;
}
.ui-accordion {
height:0;
}
.ui-accordion-header {
font-family: 'BrandonGrotesqueMedium';
font-size:16px;
text-transform:uppercase;
letter-spacing:1.5px;
line-height:12px;
padding:26px;
background:#FBAF39;
position: relative;
bottom: 64px;
cursor: pointer;
opacity: 1;
-webkit-transition: all .3s ease;
margin:0 auto;
text-align:center;
color: #FFFFFF;
z-index:9999;
}
.blurb .ui-accordion-header {
width:60px;
}
.contributors .ui-accordion-header {
width:150px;
}
.ui-state-default.ui-accordion-header.ui-accordion-header-active.ui-state-hover {
background:#FFFFFF;
color:#FBAF39;
}
.ui-state-default.ui-accordion-header.ui-state-hover{
background:#DDDDDD;
color:#777C76;
}
.ui-accordion-header-active {
background:#fbfbfb;
color:#FBAF39;
}
.blurb .ui-state-default.ui-accordion-header:after {
content:"extra";
}
.blurb .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.contributors .ui-state-default.ui-accordion-header:after {
content:"contributors";
}
.contributors .ui-state-default.ui-accordion-header.ui-accordion-header-active:after {
content:"close";
}
.ui-accordion-content {
background:#FBAF39;
background-repeat: repeat;
color:#FFFFFF;
width:90%;
padding:3% 5% 55px;
position:absolute;
bottom:0;
}
.ui-accordion-content a.button {
background:#fbfbfb;
padding:13px;
line-height:12px;
color:#FBAF39;
}
.ui-accordion-content a.button:hover, .ui-accordion-content a.button:active {
background-color:#FFFFFF;
color:#FBAF39;
}
.ui-accordion-content h6, .ui-accordion-content .lowlight, .ui-accordion-content .highlight, .ui-accordion-content .midlight, .ui-accordion-content h1 {
color:#FFFFFF;
}
.ui-accordion-content p, .ui-accordion-content .text {
color:#FFFFFF;
}
.ui-accordion ul {
margin:0;
font-family: 'Tienne'; font-weight: 400;
font-size:16px;
color:#FFFFFF;
line-height: 18px;
}
.ui-accordion .icon {
background-color:#FFFFFF;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
margin-right:10px;
}
当手风琴在移动设备上打开非常高时，那里有一些自定义 jquery 可以添加一些滚动。
非常感谢任何帮助。 谢谢。
【问题讨论】：
-
作为一个友好的建议，如果您要使用
-webkit-transition之类的东西，请务必包含 Firefox、Internet Explorer 和 Opera 的供应商前缀（最后还有无前缀版本） .尽可能提供一致的体验；）
标签： jquery jquery-ui internet-explorer accordion