Javascript“toggler”功能在 IE9 或 IE10 中不起作用（IE8 有一个备用）但在 IE11、Chrome、Firefox 中起作用

Question

我为 Prototype 和 Scriptaculous 重写了一个以前工作精美且兼容的 MooTools“切换器”系统，该系统允许在页面上的同一空间中切换两个不同的 HighCharts 图表的外观。它在 IE11、Chrome、Firefox、Safari 中运行良好，但特别是“切换”系统在 IE9 和 10 中不起作用。HighCharts 都正确呈现，但 .setStyle .appear 和 .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>  

网站版本示例在这里：http://buy.alluxa.com/317-5-1-5-od6-ultra-narrow-bandpass.html

我正在用这个把头发拉出来。任何提示甚至预感都将不胜感激。非常感谢。

Answer 1

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

关于使用 .fade 和 .appear 处理不透明度的一些问题，甚至 .setStyle 也无法正常工作。它已使用最新的prototype.js 版本1.7.2 修复：http://prototypejs.org/