Javascript“toggler”函数在IE9或IE10中不起作用(IE8有后备功能),但在IE11、Chrome和Firefox中起作用

Javascript“toggler”函数在IE9或IE10中不起作用(IE8有后备功能),但在IE11、Chrome和Firefox中起作用,javascript,internet-explorer-9,prototype,internet-explorer-10,scriptaculous,Javascript,Internet Explorer 9,Prototype,Internet Explorer 10,Scriptaculous,我为Prototype和Scriptaculous重新编写了一个以前工作良好且兼容的MooTools切换系统,该系统允许在页面的同一空间中切换两个不同的HighCharts图形。它在IE11、Chrome、Firefox、Safari中工作得很好,但特别是切换系统在IE9和IE10中不起作用。两个HighCharts都被正确渲染,但是.setStyle.appeage和.fade似乎根本不会影响CSS document.observe("dom:loaded", function() { $("

我为Prototype和Scriptaculous重新编写了一个以前工作良好且兼容的MooTools切换系统,该系统允许在页面的同一空间中切换两个不同的HighCharts图形。它在IE11、Chrome、Firefox、Safari中工作得很好,但特别是切换系统在IE9和IE10中不起作用。两个HighCharts都被正确渲染,但是.setStyle.appeage和.fade似乎根本不会影响CSS

document.observe("dom:loaded", function() {
$("rdb1").observe("click", function(){
        $("2253-2").setStyle({'opacity': '0'}),
        $("2253-2").setStyle({'top': '-9999em'}),   
        $("btnID-2").fade({duration: .01}),
        $("zoomOut-2").fade({duration: .01}),
        $("2253-1").appear({duration: .1}), 
        $("2253-1").setStyle({'top': '0'}),
        $("btnID-1").appear({duration: .01}),
        $("zoomOut-1").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
$("rdb2").observe("click", function(){
        $("2253-1").setStyle({'opacity': '0'}),
        $("btnID-1").fade({duration: .01}),
        $("zoomOut-1").fade({duration: .01}),
        $("2253-2").setStyle({'top': '0'}),
        $("2253-2").appear({duration: .1}), 
        $("btnID-2").appear({duration: .01}),
        $("zoomOut-2").appear({duration: .01}),
        $("clr0").setStyle({'margin-bottom': '26px'})
});
});
以及html:

<div id="legendwrap" class="noPrint">               
    <h4 class="chartViewLabel">View:</h4>               
    <label class="viewSelectBtn"><input id="rdb1" type="radio" name="toggler" value="1" checked/>&nbsp;&#37;T</label>               
    <label class="viewSelectBtn"><input id="rdb2" type="radio" name="toggler" value="2" />&nbsp;OD</label>          
</div>          

<div id="zoomwrap" style="float:left;text-align:left;margin-top:-1px;margin-left:2px;zoom: 1;display: block;z-index:2;overflow: hidden;" class="noPrint">
    <button id="zoomOut-1" class="btnz" style="z-index:2;position:relative;" ><i class="fa fa-search-minus"></i></button>               
    <button id="zoomOut-2" class="btnz" style="z-index:3;position:relative;opacity:0;"><i class="fa fa-search-minus"></i></button>          
</div>          

<div id="buttonwrap" style="float:right;text-align:right;margin:0 12px 0 10px;overflow: hidden;zoom: 1;display: block;">                
<div id="btnID-1" class="toHide" style="position:relative;padding-top:0px;overflow: hidden;zoom: 1;display: block;">                    
    <button id="helpBtn" class="btnz" ><i class="fa fa-question"></i></button>                  
    <button id="printit" class="btnz" ><i class="fa fa-print"></i></button>                 
    <button id="exportPNG" class="btnz" ><i class="fa fa-file-image-o"></i></button>                    
    <button id="exportPDF" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                  
    <button id="exportCSV" class="btnz" ><i class="fa fa-file-text-o"></i></button>             
</div>              
<div id="btnID-2" class="toHide" style="position:relative;opacity:0;overflow: hidden;zoom: 1;display: block;">                  <button id="helpBtn2" class="btnz" ><i class="fa fa-question"></i></button>                 
    <button id="printit2" class="btnz" ><i class="fa fa-print"></i></button>                    
    <button id="exportPNG2" class="btnz" ><i class="fa fa-file-image-o"></i></button>                   
    <button id="exportPDF2" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>                 
    <button id="exportCSV2" class="btnz" ><i class="fa fa-file-text-o"></i></button>                
</div>          
</div>

<!--Line break and margin correction-->
<div id="clr0" class="clr" style="clear:both;line-height:0;">&nbsp;</div>   

<!--Render the chart--> 
<div id="graphwrap" style="position: relative;left: 0px;height:500px;">             
    <div id="2253-1" class="toHide" style="position:relative;margin-bottom:-500px;" ></div>
    <div id="2253-2" class="toHide" style="position:relative;opacity:0;top:-9999em;" ></div>
</div>  
以下是站点版本示例:


我要用这个把头发拔出来。任何提示或直觉都将不胜感激。非常感谢。

Magento 1.9.1版附带了旧的Prototype.js 1.7版。我升级到原型1.7.2,它解决了我的IE9和10问题。我上面的代码没有问题

关于使用.fade和.appeal处理不透明度的一些东西,甚至.setStyle工作不正常。最新的prototype.js版本1.7.2已在此处修复: