css - css3メディアクエリjsがfancyboxと競合する

Question

ファンシーボックスと組み合わせて、Googleコードからcss3メディアクエリjsを使用しようとしています。

何らかの理由で、これらは Internet Explorer 9 および 10 でのみ競合します。Ie8 は、Google Chrome および Mozilla Firefox と同様に正常に動作します。

@hen CSS3 メディア クエリ JavaScript プラグインを使用し、fancybox ポップアップをクリックすると、fancybox ポップアップは空白のままになります。ポップアップが表示されますが、内部にはコンテンツがありません。また、fancybox ポップアップをクリックすると、fancybox がアクティブになっている元のレイアウトがスケーリングされ (巨大)、ポップアップが正しい幅/高さになります。

css3 メディア クエリを削除すると、すべてが正常に戻ります。助けてくれてありがとう。

これらは、レイアウト フォルダーから私の magento の page.xml で使用されるすべてのスクリプトです。

<block type="page/html_head" name="head" as="head">
                <action method="addJs"><script>js/jquery/jquery-1.9.1.js</script></action>
                <action method="addJs"><script>js/jquery/no_conflict.js</script></action>
                <action method="addJs"><script>js/vendor/modernizr-2.6.2-respond-1.1.0.min.js</script></action>
                <action method="addJs"><script>js/jquery.lazyload.js</script></action>
                <action method="addJs"><script>js/loadlazy.js</script></action>
                <action method="addJs"><script>js/vendor/bootstrap.js</script></action>
                <action method="addJs"><script>js/jquery.cookie.js</script></action>
                <action method="addJs"><script>js/jquery.fancybox.pack.js</script></action>
                <action method="addJs"><script>js/jquery.fancybox-media.js</script></action>
                <action method="addJs"><script>js/jquery-ias.js</script></action>
                <action method="addJs"><script>js/ias-load.js</script></action>
                <action method="addJs"><script>prototype/prototype.js</script></action>
                <action method="addJs"><script>lib/ccard.js</script></action>
                <action method="addJs"><script>prototype/validation.js</script></action>
                <action method="addJs"><script>scriptaculous/builder.js</script></action>
                <action method="addJs"><script>scriptaculous/effects.js</script></action>
                <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <action method="addJs"><script>scriptaculous/controls.js</script></action>
                <action method="addJs"><script>scriptaculous/slider.js</script></action>
                <action method="addJs"><script>varien/js.js</script></action>
                <action method="addJs"><script>varien/form.js</script></action>
                <action method="addJs"><script>varien/menu.js</script></action>
                <action method="addJs"><script>mage/translate.js</script></action>
                <action method="addJs"><script>mage/cookies.js</script></action>

                <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

                <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/bootstrap-modal.css</stylesheet></action>
                <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
                <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
                <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

                <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

                <action method="addJs"><script>js/css3-mediaqueries.js</script></action>
            </block>

これは私が fancybox プラグインを呼び出す方法です:

$jq191(".product-popup").fancybox({
        fitToView   : true,
        padding: 15,
        maxWidth    : browserWidth-25,
        maxHeight   : browserHeight-25,
        width        : '100%',
        height              : '100%',
        autoSize    : false,
        autoResize      : false,
        autoCenter      : true,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        type: 'iframe',
        helpers : { overlay : { locked : false
                     } },
        afterShow : function(){
            var marginPercentage= 0.0706955530216648*2;
            viewWidth= browserWidth - marginPercentage*browserWidth;
            $jq191( '.product-view' ).width( viewWidth+'px');
        }
    });

紛争の問題に関連するものは他にないと思いますが、何か知っている場合はお知らせください。投稿します。ありがとう。