Question

所以这款jquery手风琴在IE 8中不起作用，但在Firefox，Chrome和Safari中运行良好。是什么给了什么？

这是脚本链接和代码

<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可以添加一些滚动。

非常感谢任何帮助。感谢。

Answer 1

将您的jquery库更新为1.8.3等更高版本，除非您特别要求1.7.1

，否则它可以正常工作

我更新了你给的小提琴......在IE8中不适用于1.7.1但在IE8中适用于1.8.3

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>

更新了小提琴 http://jsfiddle.net/jEeqQ/10/

Answer 2

在加载jQuery UI本身之前，您正尝试使用jQuery UI accordion方法。如果刚刚在jQuery之后加载它将起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
    $( ".blurb, .contributors" ).accordion({
    activate: function( event, ui ) {}
});
</script>

Answer 3

即使我有同样的问题。但我使用这些说明解决了这个问题。

说明 1

从“开始”菜单或桌面加载Internet Explorer 8，然后浏览到Google Chrome Frame网站。点击“获取谷歌浏览器框架”按钮，阅读服务条款后点击“接受并安装”按钮。让Internet Explorer 8下载Google Chrome Frame并在安装完成后单击“关闭”按钮。

2

单击“开始”按钮，然后在“搜索程序和文件”文本框中键入“regedit”。按键盘上的“Enter”键以启动注册表编辑器。展开“HKEY_CURRENT_USER”文件夹，然后双击其下面的“Software”文件夹。右键单击“软件”中的“Google”文件夹，然后指向“新建”。选择“密钥”并输入不带引号的“ChromeFrame”。

3 右键单击注册表编辑器右侧面板中的空白区域，然后选择“新建”。选择“DWORD值”并输入不带引号的“AllowUnsafeURL”。双击“AllowUnsafeURLs”条目并将值数据设置为“1”。单击“确定”按钮并关闭注册表编辑器。

4 重新启动Internet Explorer 8并打开有jQuery问题的页面。单击Internet Explorer 8地址栏并将文本光标放在“http：//”文本之前。键入“gcf：”不带引号或空格，然后按“Enter”键以修复jQuery问题。

：我认为这将有助于你

jquery手风琴在IE 8中不起作用

3 个答案: